Question

我的网站上有一堆锚元素，我试图让它们在悬停时有黑色背景和白色文字。每个锚标签都包含在li中。有趣的是，只有一些锚元素在悬停时改变了它们的风格，而有些则没有。例如，菜单中的前三个菜单项会更改文本颜色，但其余菜单项不会更改颜色。背景颜色适用于每个项目。这是我的代码：

a, a:visited {
color:black;
text-decoration:none;
cursor:pointer;
}

a:hover,
a:hover span{
color:white !important;
background:black;
text-decoration:none;
}

<div id="navblock">
  <ul class="nav fullwidthnav">
     <li> <a href="/collections/newarrivals">NEW ARRIVALS</a></li>
     <li><a href="/collections/house">HOUSE LABELS</a></li>
     <li><a href="/collections/knits">KNITS</a></li>
     <li><a href="/collections/tops">TOPS</a></li>
     <li><a href="/collections/dresses">DRESSES</a></li>
     <li><a href="/collections/bottoms">BOTTOMS</a></li>
     <li><a href="/collections/jackets-coats">OUTERWEAR</a></li>
     <li><a href="/collections/shoes">SHOES</a></li>
 </ul>
  <div class="clearit"></div>
</div><!-- #navblock -->

Answer 1

a:visited是你的罪魁祸首。

它没有被a:hover覆盖，因为它既被访问又悬停，所以需要a:visited:hover，它可以在现代浏览器中运行，但可能不兼容IE。

要问的问题可能是你真的需要一种“访问过”的风格吗？这是用户真正需要的吗？

Answer 2

我使用-webkit-text-fill-color而不仅仅是颜色，现在它可以工作了。

a：悬停颜色变化无法正常工作

2 个答案: