在投资组合部分,您可以看到包含类别名称(例如Photomanipulation)的div正在取消缩略图悬停状态的 Action ,即使它包含在同一个 anchor 标记中。
Javascript 代码:
function thumbnail(param1){
$('#'+param1+'-thumb img').mouseover(function() {
$('#'+param1+'-thumb .color').hide().stop().fadeTo(500,'1');
})
$('#'+param1+'-thumb img').mouseout(function() {
$('#'+param1+'-thumb .color').stop().fadeTo(500,'0');
})
};
thumbnail('dubstep');
缩略图DIV结构:
<div class="thumb" id="dubstep-thumb" >
<a class="ajax" href="gallery/dubstep.html">
<p class="work-type">PHOTOMANIPULATION</p>
<img src="images/thumbs/dubstep-bwthumb.jpg" alt="" width="300" height="169"/>
<img src="images/thumbs/dubstep-thumb.jpg" alt="" width="300" height="169" class="color"/>
</a>
</div>
CSS,如果有用的话:
.thumb {
float:left;
width:300px;
height:169px;
position:relative;
margin-right:10px;
margin-top:10px;
overflow:hidden;
z-index:1;
}
.thumb img {
position:absolute;
width:300px;
height:169px;
}
.thumb .color {
display:none;
}
.work-type {
background:url('../images/transparent.png') repeat;
position:absolute;
z-index:1;
width:288px;
height:20px;
margin-top:141px;
margin-left:1px;
}
.work-type {
font-family:arial;
color:#a0a0a0;
font-size:10px;
text-align:right;
padding-top:7px;
padding-right:10px;
}
提前感谢您的帮助!
最佳答案
尝试将每个事件中的选择器更改为:
$('#' + param1 + '-thumb')...
此外,您可以使用 hover()
方法将 mouseover
和 mouseout
事件处理程序合并为一个,如下所示:
$('#'+param1+'-thumb').hover(
function() {
$('#'+param1+'-thumb .color').hide().stop().fadeTo(500,'1');
},
function() {
$('#'+param1+'-thumb .color').stop().fadeTo(500,'0');
}
) ;
关于javascript - 我的 jquery 结果中有一个错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8728264/