在懸停上切換課程？

Question

我寫了下面的代碼：

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

問題是，它似乎沒有切換懸停類？

但是我怎樣才能得到它，以便該類基於懸停和非懸停..切換？

Answer 1

不要懸停出添加不同類只是刪除active類

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

}); 

，或者如果所有元素都是不活動一開始你可能會使用一個函數和toggleClass()方法

$(document).ready(function(){ 

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

}); 

Answer 2

請嘗試如下，

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