Question

$( "#menu li" ).each(
        function(){
            $( this ).bind (
                "click",
                function(){

$(this).css("color","#FF8400");
$(this).siblings().css("color","white");


var page = $(this).attr("id");

在上面的代码中，我试图在点击它时改变链接的颜色，而其他链接保持白色，但是这些其他链接应该有一个鼠标悬停事件，可以改变颜色鼠标悬停时为＃FF8400。任何想法？

Answer 1

试试这个：

$( "#menu li" ).bind ("click", function(){
    $( "#menu li" ).css("color","white").removeClass("active");
    $(this).css("color","#FF8400").addClass("active");
    var page = $(this).attr("id");
    //Do Something
    .
    .
    .
})

$( "#menu li" ).hover (function(){
      var $this = $(this);
        if(!$this.hasClass("active")){
            $this.css("color","#FF8400");
      }
}, function(){
    var $this = $(this);
    if(!$this.hasClass("active")){
       $this.css("color", "white"); 
    }
});

Answer 2

为什么不尝试CSS和基本jQuery的组合（参见http://jsfiddle.net/wUgN8/）

CSS：

li { color: white; }
li:hover, li.on { color: #FF8400; }

jQuery的：

$( "#menu li" ).bind ("click", function(){
   $("#menu li").removeClass("on");
   $(this).addClass("on");
   var page = $(this).attr("id"); });

Answer 3

这样的事情：

$(this).siblings().bind('mouseover', function(){
    $(this).css("color","#FF8400");
});

或

$(this).siblings().bind('mousein', function(){
    $(this).css("color","#FF8400");
}).bind('mouseout', function(){
    $(this).css("color","white");
});

如何将鼠标悬停事件添加到兄弟姐妹？

3 个答案: