[英]jQuery Add/Remove Class
我有一个困境。 我刚刚学会了如何在jQuery中使用add和remove类函数,但是当你添加一个类时,它不会自动删除现有的类。 我的问题是这个。 我有一个按钮,上面有一个包含背景颜色的类。 当我将鼠标悬停在该按钮上时,我希望NEW类优先于旧类,所以从本质上讲,我必须删除旧类。 我只是不知道从哪里开始。 如果我尝试删除,添加,删除,添加,悬停似乎并没有在一次调用中处理它。 有人可以给我点子吗?
我有两个类,一个叫做'.ul.nav',另一个是'.work。
$('ul.nav a').hover(
function () {
$(this).addClass('work');
},
function () {
$(this).removeClass('work');
}
);
这是当前的课程:
ul.nav a {
display: block;
background-color:#B2B2D9;
margin-right:2%;
margin-bottom:5%;
margin-left:1%;
text-decoration:none;
border:3px #e6e6e6 ridge;
padding: 2%;
border-radius: 15px;
}
我想改成哪个
.work {
color:white;
background-color:red;
position:absolute;
top:100px;
left 230px;
}
你的CSS更改.work
到ul.nav a.work
,使之更加具体 。 然后它将覆盖旧样式。
我重新考虑你使用CSS'的方法:hover'选择器而不是JS。 就像是
ul.nav a {
background-color: blue;
}
ul.nav a:hover {
background-color: red;
}
这是CSS优先级的问题。 将您的CSS更改为:
ul.nav a.work {
color:white;
background-color:red;
position:absolute;
top:100px;
left 230px;
}
或者,因为这只是悬停,您可以删除您的JavaScript并将您的CSS更改为:
ul.nav a:hover {
color:white;
background-color:red;
position:absolute;
top:100px;
left 230px;
}
正如@Blazemonger在他的评论中暗示的那样,特异性和CSS级联阻止.work
类生效:将CSS中的.work
选择器更改为ul.nav a.work
以确保它优先。
最佳实践:尽可能使用CSS处理您的样式。 而不是.work
使用这个:
ul.nav a:hover {
color: white;
background-color: red;
position: absolute;
top: 100px;
left: 230px;
}
而且不需要javascript代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.