jQuery添加/删除类

时间:2013-02-22 16:08:04

标签: javascript jquery addclass

我有一个困境。我刚刚学会了如何在jQuery中使用add和remove类函数,但是当你添加一个类时,它不会自动删除现有的类。我的问题是这个。我有一个按钮,上面有一个包含背景颜色的类。当我将鼠标悬停在该按钮上时,我希望NEW类优先于旧类,所以从本质上讲,我必须删除旧类。我只是不知道从哪里开始。如果我尝试删除,添加,删除,添加,悬停似乎并没有在一次调用中处理它。有人可以给我一些想法吗?

我有两个班级,一个名为'.ul.nav a',另一个名为'.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;
}

5 个答案:

答案 0 :(得分:3)

.work的CSS更改为ul.nav a.work,使其成为more specific。然后它将覆盖旧样式。

答案 1 :(得分:3)

我重新考虑使用CSS的方法':悬停'选择器而不是JS。像

这样的东西
ul.nav a {
    background-color: blue;
}
ul.nav a:hover {
    background-color: red;
}    

答案 2 :(得分:1)

这是CSS precedence的问题。将您的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;
}

答案 3 :(得分:1)

正如@Blazemonger在他的评论中暗示的那样,特异性和CSS级联阻止.work类生效:将CSS中的.work选择器更改为ul.nav a.work以确保它将生效优先考虑。

答案 4 :(得分:1)

最佳实践:尽可能让CSS处理您的样式。而不是.work使用此:

ul.nav a:hover {
    color: white;
    background-color: red;
    position: absolute;
    top: 100px;
    left: 230px;
}

不需要javascript代码。