jQuery添加/删除类

Question

我有一个困境。我刚学会了如何在jQuery中使用添加和删除类函数，但当你添加一个类时，它并没有自动删除现有的类。我的问题是这样的。我有一个带有背景颜色的类按钮。当我悬停在该按钮上时，我想让新类优先于旧类，因此实质上，我必须删除旧类。我不知道从哪里开始。如果我尝试删除、添加、删除、添加，则悬停似乎不能一次处理所有内容。能否给我一些想法？

我的两个类名分别是'.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;
}

- Robert Mailloux

---

预先存在的类始终是同一个类吗？ - Blazemonger

你应该充分利用 CSS 的“级联”特性。如果你想让一个新类的属性覆盖旧类，确保你的新类 (a) 更具体（http://css-tricks.com/specifics-on-css-specificity/）并且 (b) 在 CSS 文档中排在旧类之后。 - Blazemonger

@RobertMailloux：展示你的HTML代码。 - Siva Charan

Blazemonger说得对，谢谢！ - Robert Mailloux

不用谢。别忘了接受你喜欢的答案来鼓励其他人在未来帮助你。 - Blazemonger

Answer 1

将你的CSS样式表中的.work更改为 ul.nav a.work，可以使其更具有特定性。这样做会覆盖旧的样式。详情请参阅CSS Specificity。

- Blazemonger

---

太棒了！谢谢！！ - Robert Mailloux

Answer 2

我建议您重新考虑使用 CSS 的 ':hover' 选择器，而不是 JS。类似以下代码实现：

ul.nav a {
    background-color: blue;
}
ul.nav a:hover {
    background-color: red;
}    

- Sergey Kudriavtsev

---

谢谢。我知道如何在CSS中做到这一点，但我只是想尝试自学jQuery。不过你说得对，我经常在我的设计中使用那种方法。谢谢。 - Robert Mailloux

好的，我会把我的答案留在这里，供那些寻找更简单方法的人参考。 - Sergey Kudriavtsev

Answer 3

正如@Blazemonger在他的评论中所暗示的那样，特异性和CSS级联机制阻止了.work类的生效：将CSS中的.work选择器更改为ul.nav a.work以确保它具有优先权。

- Barney

---

是的，就是这样。非常感谢大家的帮助！ - Robert Mailloux

Answer 4

这是一个与你的 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;
}

- Curtis

---

好的，这也解决了。谢谢。 - Robert Mailloux

Answer 5

最佳实践：尽可能通过CSS处理样式。而不是使用.work，应该使用以下内容：

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

不需要 JavaScript 代码。

- dfsq

---

正确，但我只是想学习jQuery，这就是为什么我这样做的原因，但还是非常感谢您。 - Robert Mailloux