使用jQuery更改背景时，链接将丢失css背景颜色悬停属性

Links lose their css background-color hover attribute when changing background with jQuery

本文关键字：背景 css 颜色 属性 悬停 链接 jQuery 使用      更新时间：2023-09-26

我有一个这样的菜单：

<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悬停的背景色属性。事实上，当我再次悬停链接时，什么也没发生。如果这对我在#菜单lia:hover css中添加color:blue有帮助，那么当我悬停时，文本是蓝色的，但仍然没有背景色。

我找到了一种用jQuery进行悬停的方法，但我更喜欢用css进行悬停，因为在我看来这就是应该的方式。是虫子吗？有没有什么方法可以在不擦拭悬停css的情况下使背景透明？

提前感谢

诺希安

我也遇到了同样的问题，我的解决方案是创建两个独立的类，而不是更改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");

直接针对背景颜色，而不是简单的"背景"：

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

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

不，问题出在CSS和它被覆盖的事实上。更改：

 a:hover {background-color: yellow; }

到此：

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

然后它就会正常工作。

您可以执行"onmouseover"javascript悬停。

这只是CSS工作方式的副作用。：hover伪类必须在：link伪类之后声明。更改：链接将重置：悬停，所以你也需要重置你的：悬停。避免这种情况的一种方法是将更改颜色的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");
相关文章：