Question

当我将鼠标悬停在图像上时，我试图制作一个简单的叠加层，该功能可以完美地运行，但会出现在所有与该类相同的div上。我希望函数在div上运行，而不是所有具有相同类的div。

我正在使用这个简单的函数来应用.css内联。

$(document).ready(function() {
    $('.attachment-home-sub-feature, .thumb-hover').hover(function() {
        $('.thumb-hover').css({
            'display': 'block'
        });
    }, function() {
        $('.thumb-hover').css({
            'display': 'none'
        });
    });
});

HTML：

<div class="sfp-img">
<div class="thumb-hover"><a class="thumb-hover-link" href="<?php the_permalink() ?>"></a></div><?php if ( has_post_thumbnail()) the_post_thumbnail('home-sub-feature'); ?>
</div>

Answer 1

使用$(this)

$(document).ready(function() {
    $('.attachment-home-sub-feature, .thumb-hover').hover(function() {
        $(this).css({
            'display': 'block'
        });
    }, function() {
        $(this).css({
            'display': 'none'
        });
    });
});

查看 - http://jsfiddle.net/LtmCP/

修改

阅读完评论后，我认为还有另一种方法。在您的CSS中，而不是仅仅thumb-hover创建2个类：

1。thumb-regular

2。thumb-hover

其中一个将显示块，另一个显示无。在您的jQuery中，使用css()和addClass而不是removeClass。（但仍然使用上面代码中的this）

使用'this'选择器对同一个类的各个div执行Jquery函数

1 个答案: