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/

正如你可以看到atm在一个特定图像上盘旋时，两个图像可见性都被设置为可见（因为它们具有相同的类）。谢谢你的帮助！

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）指的是触发事件的实际元素。

获得具有相同类别的特定图像

3 个答案: