jquery悬停问题
jquery悬停问题
提问于 2012-01-12 19:18:01
我想使用jquery来创建一个黑色渐变悬停与文本在黑色上的水平，可缩放的滚动图像(见附件截图)。此时，图像的不透明度会逐渐变暗，而不是逐渐变黑。示例可以在这里看到：http://deanpauley.co.uk/new/index.html我刚开始使用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%;
}
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>
<img src="images/NFN800.jpg" />
<img src="images/NFN800.jpg" />
<img src="images/NFN800.jpg" />
<img src="images/NFN800.jpg" />
<img src="images/NFN800.jpg" />
</div>
<script type="text/javascript">
$(document).ready(function(){
$("img").hover(function() {
$(this).stop().animate({opacity: "0.8"}, '100');
},
function() {
$(this).stop().animate({opacity: "1"}, '100');
});
});
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></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>截图：
EditIt现在可以在@Duopixel上运行，但它现在有一个黑色边框。请参阅附件中的屏幕截图。我怎么才能摆脱这个呢？
“编辑”
回答 2
Stack Overflow用户
发布于 2012-01-12 19:26:02
添加...
#images a {
display: inline-block;
background: black;
margin-right: 3px /*adjust to your linking*/
}
#images img {
padding: 0;
}然后将jQuery中的不透明度调整为您认为合适的值。
Stack Overflow用户
发布于 2012-01-12 21:16:07
我在你的代码中发现你遗漏了'#‘&’‘。jQuery代码中的前缀，下面是更正：
$("#projectinfo").hide();或
$(".projectinfo").hide();请注意，“#”用作带有ID和“.”的前缀。用作类的前缀。因此，如果projectinfo是cssClass的名称，那么第二个选项会很有帮助：
希望这能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8834197
复制相关文章
相似问题
腾讯云开发者
