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中为蓝色，当我悬停时文本为蓝色但仍然没有背景颜色。

我想出了一种使用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

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

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


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

Answer 3

不，问题在于你的CSS以及它被覆盖的事实。变化：

 a:hover {background-color: yellow; }

到此：

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

然后它会正常工作。

Answer 4

你可以做一个“onmouseover”javascript悬停。

Answer 5

这只是CSS工作方式的副作用。：hover伪类必须在：link伪类之后声明。更改：链接将重置：悬停，因此您还需要重置：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");

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

5 个答案: