我目前正在实施一个系统,我需要在悬停特定图像时制作图像层。从jquery开始,即使它们具有相同的类,如何才能获得并设置特定图像的可见性。
这是我的js代码
$(document).ready(function() {
$('.imgclass').mouseover(function() {
$('.hoverimg').css('visibility','visible');
$('.hoverimg').css('opacity','0.6');
});
$('.imgclass').mouseout(function() {
$('.hoverimg').css('visibility','hidden');
});
});
为了说清楚这是我做的一个例子。 http://jsfiddle.net/xwj4A/
正如你可以看到atm在一个特定图像上盘旋时,两个图像可见性都被设置为可见(因为它们具有相同的类)。谢谢你的帮助!
答案 0 :(得分:1)
如果我理解你,你需要this
:
$(document).ready(function() {
$('.imgclass').mouseover(function() {
$('.hoverimg' ,this).css('visibility','visible');
$('.hoverimg' ,this).css('opacity','0.6');
});
$('.imgclass').mouseout(function() {
$('.hoverimg' ,this).css('visibility','hidden');
});
});
JSFiddle:http://jsfiddle.net/xwj4A/8/
答案 1 :(得分:1)
替换:
$('.hoverimg')
使用:
$(this).find('.hoverimg')
仅选择悬停容器中存在的.hoverimg
元素。
答案 2 :(得分:-1)
您必须将新样式应用于目标元素,而不是所有具有相同类的元素。
$(document).ready(function() {
$('.imgclass').mouseover(function() {
$('.hoverimg', this).css({
visibility: 'visible',
opacity: 0.6
});
});
$('.imgclass').mouseout(function() {
$('.hoverimg', this).css('visibility','hidden');
});
});
$(this)指的是触发事件的实际元素。