Sliding CSS underline on hover - color transition not working on visited link

I created a navigation that underlines links on hover (sliding underline starting in the middle, extending outward), and also converts the link from dark green to light green. This works great unless one of the links has been clicked and it becomes a "visited" link: when I click the visited link again, the sliding underline still works, but the color won't transform from dark to light green, it just stays dark - green. I've tried everything I can think of but can't get the visited link to convert it to color as an unvisited link.

HTML:

<div id="topNavigation">
    <ul>
        <li><a href="encyclopedia.html">ENCYCLOPEDIA</a></li>
        <li><a href="journal.html">JOURNAL</a></li>
        <li><a href="society.html">SOCIETY</a></li>
        <li><a href="about.html">ABOUT</a></li>
    </ul>
</div>

      

CSS

#topNavigation a:link {
    font-family:"Quicksand-Regular", "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    font-size:20px;
    position:relative;
    color:#00590d;
    text-decoration:none;
    transition:color .35s;
    -webkit-transition:color .35s;
}

#topNavigation a:hover {
    color:#7ead34;
}

#topNavigation a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #7ead34;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

#topNavigation a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

#topNavigation a:visited {
    color:#00590d;
    text-decoration:none;
}

      

You can see what I'm talking about here: http://www.religionandnature.com/website2015/

The link to the "Encyclopedia" page is visited and the color does not cross. Other links are not visited and work fine. Any suggestions are appreciated.

+3


source to share


1 answer


The ad :visited

is currently under :hover

. This means that the color :visited

will always override the hover color.

Use LVHA Order - Link, Visit, Hang, Activity!

Pseudo-class: Visited CSS allows you to select only those links that have been visited. This style can be overridden by any other link-related pseudo-classes, that is: link ,: hover, and: active, that appear in subsequent rules. To create matching links, you need to place the: visited rule after the: link rule, but before others, defined in LVHA order :: link -: visited -: hover -: active .



The hover color will now override the visited color.

Like this:

#topNavigation a:link {}
#topNavigation a:visited {}/*Place before :hover*/
#topNavigation a:hover {}
#topNavigation a:before {}
#topNavigation a:hover:before {}

      

+2


source







All Articles