使用jQuery更改背景时，链接会失去其CSS背景颜色悬停属性

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悬停的background-color属性。 确实，当我再次将链接悬停时，什么也没有发生。 如果在#menu li a：hover css中添加color：blue时有帮助，当我将鼠标悬停时，文本为蓝色，但仍然没有背景色。

我想出了一种使用jQuery进行悬停的方法，但是我更喜欢使用CSS进行悬停，因为我认为这应该是这样。 是虫子吗？ 有什么方法可以使背景透明而不擦拭悬浮css吗？

提前致谢，

Nolhian

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");

Answer 2

不，问题在于您的CSS及其被覆盖的事实。 更改：

 a:hover {background-color: yellow; }

对此：

 a:hover {background-color: yellow!important; }

然后它将正常工作。

Answer 3

直接定位背景色，而不仅仅是“ background”：

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


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

Answer 4

您可以执行“ onmouseover” javascript悬停。

Answer 5

这只是CSS工作方式的副作用。 ：hover伪类必须在：link伪类之后声明。 更改：link将重置：hover，因此您也需要重置：hover。 避免这种情况的一种方法是将更改颜色的CSS从其初始设置移动到类中：

a:link {background-color: transparent; }
a:hover {background-color: yellow; }
a.myClass:link {background-color: cyan; }

接着

$("#menu > li > a:link").addClass("myClass");

然后

$("#menu > li > a:link").removeClass("myClass");