jQuery悬停/点击类

Question

我正在为网站创建菜单。 我正试图完成一个悬停和点击对链接的影响。我想要列表元素a上的悬停事件触发彩色动画并添加“active”类。如果点击和悬停事件被触发，我想将相同的类分配给该元素。 问题是，一旦元素没有被徘徊并且其他元素被点击，该类就必须被移除。 这是代码：

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

注意点击处理程序首先删除任何活动的类。

Answer 2

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

$("#menu ul li a").click(function() { 
    $("#menu ul li a").removeClass('active'); 
    $(this).addClass('active'); 
}); 

它首先去除它可能已被连接到所有链接类active，然后将其设置为当前的一个。

Answer 3

我真的建议增加悬停，并使用通过CSS3点击效应 '：主动' 和 '：悬停'

至于一些jQuery的：

$('#menu li a').click(function() { 
    $('#menu li a').not(this).removeClass('active'); 
    $(this).addClass('active'); 
}); 

和示例 - http://jsfiddle.net/claycauley/AzXgX/

Answer 4

这是一个使用css3转换：

http://jsfiddle.net/wrtyM/2/