jquery - jQueryホバーをオーバーライドする選択状態にする方法は?

Question

javascript を使用して情報ボックスのさまざまなコンテンツを変更する一連のリンクがあります。

マウスオーバー効果のために、リンクに jquery hover を使用しています。

$('a.year').hover(
function (event) {
    console.log("mouseover detected");  
        $(this).animate({   fontSize: '16px',
                            color: '#405481',
                            opacity: '1'
                        },  100);
    },
function (event) {
        $(this).animate({   fontSize: '10px',
                            color: '#405481',
                            opacity: '0.25'
                        },  100);
    }
);

また、クラスを切り替えて選択状態を作成しようとしています。これにより、現在のリンクがホバー機能の影響を受けずに大きく保たれます。

$("#" + value).toggleClass('year year_selected');

問題は、クラス スイッチが機能しないことです。これを行う方法はありますか？

Answer 1

.not（）.year_selectedを使用して、クラスとのリンクを除外してみてください。

$('a.year').not('.year_selected').hover( ... );

Answer 2

$('a.year').on({
    mouseenter: function() {
        if (!$(this).is('.year_selected')) {
            $(this).animate({   fontSize: '16px',
                                color: '#405481',
                                opacity: '1'
                            },  100);
        }
    },
    mouseleave: function() {
        $(this).animate({   fontSize: '10px',
                            color: '#405481',
                            opacity: '0.25'
                        },  100);
    },
    click: function(e) {
        e.preventDefault();
        //depending on markup to find selector, I'm assuming siblings
        $(this).addClass('.year_selected').siblings().removeClass('.year_selected');

    }
});