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/

編集：

あなたのコメントを読んだ後、それを行う別のアプローチがあると思います。thumb-hoverCSS で、 2 つのクラスを作成するだけでなく、次のようにします。

1.thumb-regular

2.thumb-hover

そのうちの 1 つは表示ブロック付きで、もう 1 つは表示なしです。jQuery では、 を使用する代わりに、 and をcss()使用addClassしremoveClassます。（ただしthis、上記のコードのように使用します）

于 2012-08-19T13:10:44.157 に答える