I have written the following code:

$(document).ready(function () {
    $("#rade_img_map_1335199662212").hover(function () {
        $("li#rs1").addClass("active");  //Add the active class to the area is hovered
    }, function () {
        $("li#rs1").addClass("not-active");
    });
});

The problem is it doesnt seem to toggle the class on hover?

But how can i get it so that the class toggles based on hover and non-hover..?

I have written the following code:

$(document).ready(function () {
    $("#rade_img_map_1335199662212").hover(function () {
        $("li#rs1").addClass("active");  //Add the active class to the area is hovered
    }, function () {
        $("li#rs1").addClass("not-active");
    });
});

The problem is it doesnt seem to toggle the class on hover?

But how can i get it so that the class toggles based on hover and non-hover..?

• javascript
• jquery

• Do you have the html code as well? – Jonathan Payne Commented Apr 23, 2012 at 17:24

2 Answers 2

Do not add a different class on hover-out just remove the active class

$(document).ready(function(){

  $("#rade_img_map_1335199662212").hover(function(){

      $("li#rs1").addClass("active");  //Add the active class to the area is hovered
  }, function () {
      $("li#rs1").removeClass("active");
  });

});

or if all elements are inactive at first you could use a single function and the toggleClass() method

$(document).ready(function(){

  $("#rade_img_map_1335199662212").hover(function(){
      $("li#rs1").toggleClass("active");  //Toggle the active class to the area is hovered
  });

});

Try like below,

  $(document).ready(function () {    
      $("#rade_img_map_1335199662212").hover(function () {    
          $("#rs1")
             .removeClass("not-active")
             .addClass("active");  //Add the active class to the area is hovered
      }, function () {
          $("#rs1")
             .removeClass("active");
             .addClass("not-active");
      });    
  });