a:hover color change not working properly

Question

I have a site with a bunch of anchor elements, and I'm trying to make them have a black background with white text on hover. Each anchor tag is wrapped in li. Funny thing is, only some anchor elements change their style on hover, and some don't. For example, the first three menu items in the menu change the text color, but the rest doesn't change the color. The background color works for every item. This is my code:

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 is your culprit.

It is not being overridden by a:hover because it is both visited and hover so would need to be a:visited:hover which will work in modern browsers but possibly not IE compatible.

A question to ask may be do you really need a "visited" style? Is that something users really need?

Answer 2

我使用了-webkit-text-fill-color而不是color，现在可以了。