3

我有一个两难境地。我刚刚学习了如何在 jQuery 中使用添加和删除类函数，但是当你添加一个类时，它不会自动删除现有的类。我的问题是这个。我有一个按钮，上面有一个包含背景颜色的类。当我悬停该按钮时，我希望 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;
}
4

5 回答 5

3

更改您的 CSS.work以ul.nav a.work使其更具体。然后它将覆盖旧样式。

于 2013-02-22T16:14:21.160 回答
3

我会重新考虑您使用 CSS ':hover' 选择器而不是 JS 的方法。就像是

ul.nav a {
    background-color: blue;
}
ul.nav a:hover {
    background-color: red;
}
于 2013-02-22T16:14:36.233 回答
1

这是您的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;
}
于 2013-02-22T16:13:56.867 回答
1

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

于 2013-02-22T16:14:27.523 回答
1

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

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

并且不需要javascript代码。

于 2013-02-22T16:16:56.930 回答