0

ワードプレスの注目の画像に .fadeTo() jQuery 効果を使用しています。コードをどのようにセットアップしたかというと、マウスが画像の上に置かれると 0.7 にフェードし、マウスが離れると 1 にフェードバックします。

jQuery(function($) {
$(window).load(function() {
    $('.image').mouseover(function() {
        $('.image').fadeTo('fast', 0.7);
    });
    $('.image').mouseout(function() {
        $('.image').fadeTo('fast', 1); 
    });
});

});

与えられたクラスは「.image」で、注目の画像コードの wordpress ループ内の div に次のように配置しました。

<div class="image"><?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?> <!-- If has featured image, GET --></div>

私が直面している問題は、SINGLE 画像にカーソルを合わせるたびに、ページ上のすべての画像がフェードアウトすることです。私が本当に欲しいのは、マウスがホバーしている画像をフェードさせることです。何が間違っていますか?

4

2 に答える 2

5

すべての画像に.imageクラスがあるため、jQuery はそれらの画像にカーソルを合わせると、それらの画像をすべて返します。

を変更してみてください

$('.image').fadeTo('fast', 0.7);

に

$(this).fadeTo('fast', 0.7);

mouseout イベントについても同様です。

これが役立つ簡単な例です。

于 2013-08-26T19:15:53.357 に答える
2

その要素でマウスオーバー イベントが発生したら、jQuery セレクターを再度呼び出す必要はありません。

you を使用$('.image')すると、そのクラスですべての要素が呼び出され、それらにフェードが適用されます。代わりに使用するthisと、マウスが上にある要素のみを参照します。代わりにこれを試すことができます：

$('.image').mouseover(function() {
    $(this).fadeTo('fast', 0.7);
});
$('.image').mouseout(function() {
    $(this).fadeTo('fast', 1); 
});
于 2013-08-26T19:15:37.140 に答える