jquery悬停问题

我想使用jquery在水平，可缩放滚动图像（请参阅附加的屏幕截图）上将文本悬停在黑色上以创建黑色淡入淡出。在这一刻，图像淡化不透明度，而不是渐变为黑色。示例可以在这里看到：http://deanpauley.co.uk/new/index.html 我是新来的使用jquery已经完全搞糊涂了。任何帮助将不胜感激。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>[email protected]</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>

截图：

image on hover

EditIt现在工作@Duopixel但现在有一个黑色的边境。查看附件截图。我怎样才能摆脱这一点？

enter image description here

“编辑”

来源

2012-01-12 Dean Pauley

添加...

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

#images img { 
    padding: 0; 
}

然后在jQuery的调整不透明度到任何看起来不错给你。

来源

2012-01-12 11:26:02 Duopixel

是的！这工作正常.. @Duopixel，我已经使用gravatar在http://jsfiddle.net/m7a8r/上的示例它检查了它的工作原理 – Rafee 2012-01-12 11:39:54

但是我怎样才能摆脱现在出现的黑色边框？ – 2012-01-12 11:43:15

你确定你在CSS中添加了'#images img {...}'吗？ – Duopixel 2012-01-12 11:59:34

我从你的代码中发现你缺少'＃'&'。'前缀jQuery代码，下面是修正：

$("#projectinfo").hide();

或

$(".projectinfo").hide();

请注意， '＃' 作为与ID和前缀 ''被用作类的前缀。因此，如果projectinfo是cssClass的名称，那么第二个选项会有帮助：

希望这有助于。

来源

2012-01-12 13:16:06

jquery悬停问题

回答

相关问题