CODEWITHSUNDEEP
jquery
Mohamed Said
Mohamed Said

Reputation: 4623

How to add a mouse-over event to siblings?

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

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


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

In the code above, I'm trying to make the color of the link to change when clicking on it, while other links stay in white color, however these other links should have a mouse-over event that changes the color from white to #FF8400 on mouse-over. Any Ideas?

Upvotes: 0

Views: 484

Answers (3)

Chandu
Chandu

Reputation: 82943

Try this:

$( "#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"); 
    }
});

Upvotes: 1

Tomm
Tomm

Reputation: 2142

Why not try a combination of CSS and basic jQuery (see 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"); });

Upvotes: 1

Mrchief
Mrchief

Reputation: 76258

Something like this:

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

or

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

Upvotes: 0

Related Questions