jQuery：要素のマウスオーバー/マウスアウトのクラスをトグルしますが、内部要素をクリックするとクラスを維持しますか？

StackOverflow https://stackoverflow.com/questions/1785650

質問

私はこれで自分自身のために賢くなりすぎようとしているのではないかと疑っています！

私は、ホバリングする前にホバリングする前に要素をクリックしてもクラスを削除していない場合、クラスを削除していない場合、クラスを削除していない場合、クラスを削除し、切り替えないjQueryプラグイン機能に取り組んでいます。要素は、ホバリングする前にすでにそのクラスを持っています。

次のことを考えてみました。

    $.fn.showHover = function(settings) {
    this.bind('mouseover', function hoverIn(){
        if ($(this).hasClass('active') == false) {
            $(this).addClass('active');
            $(this).bind('click', function getFocus(){
              $(this).unbind('mouseout', hoverOut);
            })
            $(this).bind('mouseout', function hoverOut(){
              $(this).removeClass("active");
              $(this).unbind('click', getFocus);
            })
        }
    })
    return this;
};

...クリックする前にホバリングした場合のアイデア、クラスを削除してバインドクリックを削除します - ホバリングする前にクリックすると、アンバインドマウスアウトとクラスが削除されることはありません。

明らかに（私はここで助けを求めているので！）それはうまくいきません - ホバリングする前に要素の内部をクリックするかどうかにかかわらず、クラスは削除されます。

誰かがそれが失敗している理由を指摘し、おそらくそれを回避するより良い方法を示唆することができますか？ありがとう！

役に立ちましたか？

解決

要素の外観を変更することがCSSを介して目標を変更する場合、1つの簡単な解決策は、別の名前で別のセレクターを単に追加することです。

.active_hover,
.active_click { ... }

次に、Hover/Unhoverイベントをバインドして「Active_Hover」クラスを追加/削除し、クリックイベントを追加して「Active_Click」クラスを追加します。

他のヒント

これを行うことができます

$(".class").mouseenter( function(){
$(this).css("edit css"); // you can use .animate instead of .css if you want
});
$(".class").mouseleave( function(){
$(this).removeAttr('style');
});
$(".class").click( function(){
$(this).addClass("setactiveclass");
});

そのため、ホバリングすると、インラインCSSが設定され、divからホバリングすると、jqueryによって設定されたインラインスタイルが削除されます。ハードクラスが設定されているため、お互いに干渉しません。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top