Javascript 在悬停时切换课程？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10285190/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
toggle class on hover?
提问by SOLDIER-OF-FORTUNE
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..?
但是我怎样才能得到它，以便类根据悬停和非悬停切换..？
回答by Gabriele Petrioli
Do not add a different class on hover-out just remove the activeclass
不要在悬停时添加不同的类，只需删除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");
});
});
or if all elements are inactive at first you could use a single function and the toggleClass()method
或者如果所有元素一开始都处于非活动状态，您可以使用单个函数和toggleClass()方法
$(document).ready(function(){
$("#rade_img_map_1335199662212").hover(function(){
$("li#rs1").toggleClass("active"); //Toggle the active class to the area is hovered
});
});
回答by Selvakumar Arumugam
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");
});
});
