jQuery 悬停/点击类

Question

我正在为网站创建菜单。我正试图在链接上实现悬停 和点击 效果。我希望列表元素 a 上的悬停事件触发彩色动画并添加“事件”类。如果触发了点击和悬停事件，我想为该元素分配相同的类。问题是，一旦元素未悬停并且单击其他元素，就必须删除该类。这是代码:

<div id="menu">
        <ul>
            <li><a href="#" id="btHome">HOME</a></li>
            <li><a href="#" id="btAbout">NOSOTROS</a></li>
            <li><a href="#" id="btGallery">GALERIA</a></li>
            <li><a href="#" id="btContact">CONTACTO</a></li>
        </ul>
</div>

还有 CSS:

.active{
    color:#0CF;
    background-image:url(../img/select.png);
    background-repeat:no-repeat;
    background-position:right center;
}

jQuery:

$("#menu ul li a").hover(function() {
    $(this).stop().animate({color: "#0CF"}, 250); //I have the jQueryUI plugin
},function() {
    $(this).stop().animate({color: "#FFF"}, 100);
});

$("#menu ul li a").click(function() {
    $(this).toggleClass('active', 150);
});

Answer 1

你可以在这里继续链接，不需要有 2 个单独的选择器:

var allLinks = $("#menu ul li a").hover(function() {
    $(this).stop().animate({color: "#0CF"}, 250);
},function() {
    var $this = $(this);
    if(!$this.hasClass('active')) // if it is not the active link
        $this.stop().animate({color: "#FFF"}, 100);
}).click(function() {
    allLinks.removeClass('active');
    $(this).toggleClass('active', 150); // may need to adjust the timing here for better UX
});

注意在点击处理程序中首先删除任何事件类。