CSS link:hover style only applies to the first instance even with using class

Question

I have been stuck on this thing for a while and was not able to come up with a solution. I have a few links that I have styled using class. However, it seems that the :hover and :visited state styling only applies to the first link, even though I specifically used class in order to style all of them. I really am not sure where the hold up is.

Here is my code:

<div class="container">
<div class="row">
  <div class="col-md-6 push-md-3 max-auto main animsition">
    <h3 class="text-center">Contact <span class="dev">Me</span></h3>
    <p class="contactLinks"><a href="mailto:#"><i class="fa fa-envelope" aria-hidden="true"></i> - Email me</a></p>
    <p class="contactLinks"><a href="#" target="_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i> - Facebook</a></p>
    <p class="contactLinks"><a href="#" target="_blank"><i class="fa fa-twitter-square" aria-hidden="true"></i> - Twitter</a></p>
    <p class="contactLinks"><a href="#" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i> - LinkedIn</a></p>
  </div>
</div>
</div>

CSS:

.main > h3 {
  padding-bottom: 30px;
}

.contactLinks a {
  font-size: 150%;
  color: #262626; 
}

.contactLinks a:hover {
  color: #6E8A71;
  text-decoration: none;
}

.contactLinks a:visited {
  color: #262626;
  text-decoration: none;
}

Mihai T Mihai T · Accepted Answer · 2017-07-31T07:18:37

Try putting the :hover after the :visited event. And you can also add .contactLinks a:visited:hover so you are sure that when hovering over a visited link you get the desired result

As you know, you cannot set text-decoration on :visited links. It has to do with browser history security reasons. see here > Privacy visited links

You can instead use border-bottom to simulate the underline. See updated snippet below

.main > h3 {
  padding-bottom: 30px;
}

.contactLinks a {
  font-size: 150%;
  color: #262626; 
  text-decoration: none;
  border-bottom:1px solid black;
}



.contactLinks a:visited {
  color: #262626;
  border-bottom:1px solid transparent;
  
}

.contactLinks a:hover,.contactLinks a:visited:hover{
  color: #6E8A71;
  border-bottom:1px solid transparent;
}

<div class="container">
<div class="row">
  <div class="col-md-6 push-md-3 max-auto main animsition">
    <h3 class="text-center">Contact <span class="dev">Me</span></h3>
    <p class="contactLinks"><a href="mailto:#"><i class="fa fa-envelope" aria-hidden="true"></i> - Email me</a></p>
    <p class="contactLinks"><a href="#" target="_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i> - Facebook</a></p>
    <p class="contactLinks"><a href="#" target="_blank"><i class="fa fa-twitter-square" aria-hidden="true"></i> - Twitter</a></p>
    <p class="contactLinks"><a href="#" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i> - LinkedIn</a></p>
  </div>
</div>

CSS link:hover style only applies to the first instance even with using class

3 Answers