个人中心
gpt4 book ai didi

jquery fade hover 4 问题

转载 作者：行者123 更新时间：2023-11-28 14:18:16 25 4
gpt4 key购买 nike

我有四个关于 jquery 在图像悬停时淡化为黑色的问题:

  1. ——第一个是个小问题——周围有黑色边框我无法摆脱的图像。
  2. ——第二个是偶尔悬停其中一个图像尺寸减小(见附件截图)
  3. — 第三个是我似乎无法提高悬停的速度
  4. — 第四个是我希望在悬停时显示居中的文本

我真的是 Jquery 的新手，所以对于这些问题中的任何一个的任何帮助将不胜感激。提前致谢。

这是 CSS:

@charset "UTF-8";
/* CSS Document */

body {
    font-family: 'Questrial', sans-serif;
    background:#f5f5f5;
    border-bottom-left:25px;
    border-left-color:#F0EFF1;
    border-left-height:1000px;
    }

#border {
    position:fixed;
    width:37px;
    height:8000px;
    margin-left:-10px;
    margin-top:0px;
    z-index:2000;
    background-color:#f5f5f5;
    }

#infoleft
    {   
    position:fixed;
    top:20px;
    left:25px;
    font-weight:normal;
    font-size: 15px;
    letter-spacing: 0.14em;
    line-height:1.2em;
    display:block;
    }

#infoleft ul {
    height:20px;
    font-weight:normal;
    font-size: 14.5px;
    letter-spacing: 1px;
    text-decoration:none;
    margin: 0;
    padding: 0;
    list-style-type: none;
    }

#infoleft ul li { 
    display: inline; 
    padding: 10px;
    }


#inforight
    {   
    position:fixed;
    top:21px;
    right:23px;
    font-weight:normal;
    font-size: 14.5px;
    letter-spacing: 1pxem;
    }


#inforight ul {
    height:20px;
    font-weight:normal;
    font-size: 15px;
    letter-spacing: 0.13em;
    text-decoration:none;
    margin: 0;
    padding: 0;
    list-style-type: none;
    }


#images {
    position:absolute;
    left:30px;
    bottom:35px;
    top:100px;
    width:25000px;
    padding-top:80px;
    min-height:500px;



}

img {
    padding:5px;
    height:90%;
}

#images a {
  display: inline-block;
  background: black;
  margin-right: 3px;
  /*adjust to your linking*/
}

#images img {
  pading: 5,5,5,5,;
}

img a:hover {
    color:black;
    opacity:1;
}

a {
    text-decoration:none;
    color:#000;
}

a:hover {
    color:#0080ff;
}

#showinfo {
    position:fixed;
    top:150px;
    left:35px;
    width:20px;
    height:20px;
    font-size:15px;
    z-index:2000;
}

#showinfo a {
    color:#000;
}

#showinfo a:hover {
    color:#0080ff;
    cursor:pointer;
}


#projectInfo {
    position: fixed;
    background: #f5f5f5;
    top: 185px;
    left: 5px;
    width: 280px;
    z-index: 1000;
    padding: 20px 32px 32px 30px;
    height: 280px;
    font-size: 13.5px;
    line-height:1.4em;
    letter-spacing:0.13em;
}

和 Html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type='text/javascript' src='jquery.js'></script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Dean Pauley — Recent work</title>
<link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script defer src="js/script.js"></script>
</head>
<body>
<div id="showinfo">
<a href="#" id="showProjectInfo"><span id="showhide">[+]</span></a>
</div>
<div id="projectInfo" style="display: block; ">
            <p>News from Nowhere</p>                            
            <p>—</p>
            <p>A response to The Tyranny of Email by John Freeman exploring how the quality of the written word has deteriorated due to the faster methods of digital communication by contrasting it with that of a pre-digital era. The leather bound-book consists of over 3000 different spam emails.

</p>
</div>
<div id="border">
</div>
<div id="infoleft">
<ul>
<li><a href="index.html">Dean Pauley</a></li>
<li>Graphic Design</li>
<li>mail@deanpauley.co.uk</li>
<li>+44(0)7969 652 219</li>
</ul>
</div>
<div id="inforight">
<ul>
<li><a href="info.html" class="transition">Information</a></li>
</ul>
</div>
<div id="images">
<a href="#"><img src="images/img_off.jpg" /></a>
<a href="#"><img src="images/Calendar1.jpg" /></a>
<a href="#"><img src="images/img_off.jpg" /></a>
<a href="#"><img src="images/Calendar1.jpg" /></a>
<a href="#"><img src="images/img_off.jpg" /></a>
<a href="#"><img src="images/Calendar1.jpg" /></a>
<a href="#"><img src="images/img_off.jpg" /></a>
<a href="#"><img src="images/Calendar1.jpg" /></a>
<a href="#"><img src="images/img_off.jpg" /></a>
<a href="#"><img src="images/Calendar1.jpg" /></a>
<a href="#"><img src="images/img_off.jpg" /></a>
<a href="#"><img src="images/Calendar1.jpg" /></a>
</div>
<script type="text/javascript">
  $(document).ready(function(){
    $("img").hover(function() {
      $(this).stop().animate({opacity: "0.2"}, '300');
    },
    function() {
      $(this).stop().animate({opacity: "1"}, '300');
    });
  });
</script>

  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>


<script type="text/javascript">
$(document).ready(function(){
        $("projectinfo").hide();
        $("showprojectinfo").show();
    $('.show_hide').click(function(){
    $("projectinfo").slideToggle();
    });
});
</script>
<script src="js/script.min.js"></script>
</body>


</html>

截图:

Image with unwanted border

Hover with text

最佳答案

我发现在我的编程中图像变小的问题发生了，即使我已经专门将每个图像完美地调整到精确的尺寸并减小了文件大小......然后我发现它发生在幻灯片中，如果实际文件名的图像在格式名称(以 jpeg、gif、png 等结尾)之前有一个空格或破折号或其他一些奇怪的字符，足以产生一个错误，看起来图像越来越大关闭，就像相机快门一样。如果您返回并简单地重命名图像或删除空格、破折号等，然后重新加载它们，那么它会照常进行，幻灯片会按您的预期进行转换。

关于jquery fade hover 4 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8834849/

25 4 0
文章推荐： javascript - 使用 Perl 解析 JavaScript : getting "undef" from JE->parse
文章推荐： html - Div 中的居中按钮，位于其他居中文本下方
文章推荐： javascript - 将 google-app-script 中的所有拉丁字母替换为数字？
文章推荐： javascript 预期表达式，得到关键字 'break'
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com