Javascript jQuery添加/删除类

我有一个迪莱姆纳。我刚刚学习了如何在jQuery中使用add和remove类函数，但是当您添加一个类时，它不会自动删除现有的类。我的问题是这个。我有一个按钮，上面有一个包含背景色的类。当我悬停该按钮时，我希望新类优先于旧类，因此本质上，我必须删除旧类。我只是不知道从哪里开始。如果我尝试删除，添加，删除，添加，悬停似乎不能在一次调用中处理所有问题。有人能给我一些建议吗

我有两门课，一门叫做“ul.nav a”，另一门叫做“工作”

$('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更改为：

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

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

或者，由于这只是用于悬停，您可以删除javascript并将CSS更改为：

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

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

---

将

.work

的CSS更改为

ul.nav a.work

以使其生效。然后它将覆盖旧样式。

正如@Blazemonger在其评论中所暗示的那样，特殊性和CSS层叠正在阻止

.work

类生效：将CSS中的

.work

选择器更改为

ul.nav.work

，以确保它优先。

我会重新考虑使用CSS的方法：hover”选择器而不是JS。差不多

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

---

最佳实践：尽可能让CSS处理您的样式。不要使用

.work

，而是使用以下方法：

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

---

而且不需要javascript代码。

预先存在的类总是同一个类吗？能否给出一个悬停事件前后HTML的示例？您可能应该利用CSS的“级联”部分。如果希望新类的属性覆盖旧类，请确保新类（a）和（b）列在CSS文档中旧类之后。@RobertMailloux:显示html代码不客气。别忘了接受你最喜欢的问题答案，鼓励别人在将来帮助你。谢谢。我知道如何在CSS中实现它，但我只是想自学jQuery。你是对的，我经常在我的设计中使用这种方法。谢谢你，我会把我的答案留在这里，让那些寻找更简单方法的人来回答！非常感谢。是的，也是这样。谢谢你。太棒了，救命啊！没错，但我只是想学习jQuery，这就是我为什么这么做的原因，不过也谢谢你