0

我试图在将鼠标悬停在图像上时进行简单的叠加，该功能可以完美运行，但会出现在该类的所有 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>
4

1 回答 1

0

利用$(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像上面的代码一样使用）

于 2012-08-19T13:10:44.157 回答