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');

    }
});