css - :hover color change not working properly

Question

我有一个带有一堆 anchor 元素的网站，我试图让它们在悬停时具有黑色背景和白色文本。每个 anchor 标签都包裹在 li 中。有趣的是，只有一些 anchor 元素在悬停时会改变它们的样式，而有些则不会。例如，菜单中的前三个菜单项会更改文本颜色，但其余的不会更改颜色。背景颜色适用于每个元素。这是我的代码:

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 不兼容。

可能要问的一个问题是您真的需要“已访问”样式吗？这是用户真正需要的东西吗？