0

単一の要素を対象としていますが、複数の要素としてクラス名を持つホバー効果を実現しようとしています。たとえば、その特定の要素にカーソルを合わせたときにのみ、ホバー効果が発生するようにします。しかし、残りの要素にカーソルを合わせた場合に機能するコードは、これまでのところ..

$(".thumb-overlay-content").hover(function() {
    $(this).parent('.thumb-overlay-desc').removeClass('animated rotateOut');
    $(this).parent('.thumb-overlay-desc').addClass('animated rotateIn');
}, function() {
    $(this).parent('.thumb-overlay-desc').removeClass('animated rotateIn');
    $(this).parent('.thumb-overlay-desc').addClass('animated rotateOut');
});

ありがとう

4

4 に答える 4

1

.hoverjqueryで関数を使用する必要があります。これにより、ホバーしたアイテムを具体的にターゲットにすることができます。上記の回答とは異なり、関数を使用する必要はありません.parent。

$(".thumb-overlay-content").hover(function() {
    $(this).removeClass('rotateOut').addClass('rotateIn');
}, function() {
    $(this).removeClass('rotateIn').addClass('rotateOut');
});

.animatedまた、すぐにクラスを追加し直す場合は、クラスを削除する必要はありません。

動作中のjsfiddleを見る

そうではありませんが、jqueryが必要かどうかはわかりません。CSSを調整すれば、単純な.thumb-overlay-content:hoverクラスですべて実現できます

于 2013-10-23T14:02:06.497 に答える
0

jQuery で識別子またはより正確なクエリを使用する必要があります。

idオブジェクトに属性を追加し、次のことを行います。

$("#myIdName").hover(function() {
    $(this).parent('.thumb-overlay-desc').removeClass('animated rotateOut');
    $(this).parent('.thumb-overlay-desc').addClass('animated rotateIn');
}, function() {
    $(this).parent('.thumb-overlay-desc').removeClass('animated rotateIn');
    $(this).parent('.thumb-overlay-desc').addClass('animated rotateOut');
});

より正確なクエリを作成するには、jQuery セレクターを見てください。

于 2013-10-23T13:52:44.387 に答える
0

もう少しコンテキストが役立つと思いますが、toggleClass を試しましたか?

$(".thumb-overlay-content").hover(function() {
    $(this).parent('.thumb-overlay-desc').toggleClass('rotateIn rotateOut');
}, function() {
    $(this).parent('.thumb-overlay-desc').toggleClass('rotateIn rotateOut');
});

ところで、 $(this) はすでにトリガー要素をターゲットにしているため、同じクラス名を持つ他の要素は変更しないでください。

于 2013-10-23T13:53:15.973 に答える