CSS: conflict between -webkit-filter and filter

Question

I have a navigation bar which uses images as links, like this:

<nav>
  <ul>
    <li>
      <a href="#link">
        <img src="img/link.png">
      </a>
    </li>
  </ul>
</nav>

To create a glow around an unvisited link, I have the following CSS:

nav a img {
  -webkit-filter: drop-shadow(0px 0px 8px #fff);
  -o-filter: drop-shadow(0px 0px 8px #fff);
  -ms-filter: drop-shadow(0px 0px 8px #fff);
  filter: drop-shadow(0px 0px 8px #fff);
}

nav a:visited img {
  -webkit-filter: none;
  -o-filter: none;
  -ms-filter: none;
  filter: none;
}

In Chrome, the nav a img rule applies -webkit-filter: drop-shadow(0px 0px 8px #fff); and the nav a:visited img rule applies filter: none;, with the result that the glow remains even after the link has been visited.

Is there anything I can do about this?

On Firefox, the nav a:visited img rule is not acknowledged at all. Presumably this is due to privacy concerns.

Is there a way to get an unvisited link image to glow, and a visited link image to not glow?

Answer 1

The only properties of the :visited element that can be changed are:

color

background-color

border-color (and its sub-properties)

outline-color

The color parts of the fill and stroke properties