javascript - 获取具有相同类别的特定图像

Question

我目前正在实施一个系统，我需要在悬停特定图像时制作图像层。从 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/

正如您所见，当一个人将鼠标悬停在特定图像上时，两个图像的可见性都设置为可见（因为它们具有相同的类）。谢谢你的帮助！

Answer 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/

Answer 2

代替：

$('.hoverimg')

和：

$(this).find('.hoverimg')

为了只选择.hoverimg悬停容器中存在的元素。

Answer 3

您必须将新样式应用于目标元素而不是具有相同类的所有元素。

$(document).ready(function() {
    $('.imgclass').mouseover(function() {
        $('.hoverimg', this).css({
            visibility: 'visible', 
            opacity: 0.6
        });
    });
    $('.imgclass').mouseout(function() {
        $('.hoverimg', this).css('visibility','hidden');
    });
});

$(this) 指的是触发事件的实际元素。