javascript - 使用 jQuery 更改背景时，链接会丢失其 css background-color 悬停属性

Question

我有一个像这样的菜单:

<ul id="menu">
    <li><a href="#" id="test">test</a></li>
    <li><a href="#" id="test2">test2</a></li>
</ul>

和CSS:

#menu li a:link {
background: transparent;
}

#menu li a:hover {
background-color: red;
}

在我的代码中的某个时刻，我需要再次使链接的背景透明，所以我做了一个:

$("#menu > li > a:link").css("background","transparent");

这行得通，但在那之后，我的问题是它似乎删除了 css 悬停的背景颜色属性。事实上，当我再次悬停链接时，什么也没有发生。如果这对我在 #menu li a:hover css 中添加 color:blue 有帮助，当我悬停时文本为蓝色但仍然没有背景色。

我想出了一种使用 jQuery 实现悬停的方法，但我更愿意使用 css 实现，因为在我看来它应该是这样的。这是一个错误吗？有没有办法在不删除悬停 css 的情况下使背景透明？

提前致谢

诺兰

Answer 1

我遇到了同样的问题，我的解决方案是创建两个单独的类而不是在 jquery 中更改背景颜色。

a.default:hover {  background-color: red; }
a.hovered:hover {  background-color: transparent; }  

$("#menu > li > a:link").removeClass("default");
$("#menu > li > a:link").addClass("hovered");