将鼠标悬停在父div上时CSS淡入子级，然后将鼠标悬停在子代上时再次更改

Question

I'm trying to get an effect like the one on the social media buttons on this website: http://www.goldsquare.co/about (the icons under the picture of the girl). My CSS now gets the buttons to fade to gray when I hover over the parent div, but the individual buttons don't turn black when I hover over them like they should.

HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="social-media-icons">
  <a href="#" class="fa fa-facebook"></a>
  <a href="#" class="fa fa-twitter"></a>
  <a href="#" class="fa fa-instagram"></a>
</div>

CSS:

.fa {
  padding: 10px;
  font-size: 15px;
  width: 20px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  background: black;
  color: white;
}

.fa:hover {
  transition: background 0.2 ease;
  background: black;
}


.social-media-icons:hover a {
  transition: background 0.2s ease;
  background: #cccccc;
}

You can see it in action at this jfiddle: http://jsfiddle.net/brettfisher/fcn4d097/8/ How do I get the desired effect? Thank you in advance.

Answer 1

By adding !important on .fa:hover . You could achieve the expected result.

Check the following fiddle:

 .fa { padding: 10px; font-size: 15px; width: 20px; text-align: center; text-decoration: none; border-radius: 50%; background: black; color: white; } .fa:hover { transition: background 0.2 ease; background: black !important; } .social-media-icons:hover a { transition: background 0.2s ease; background: #cccccc; } 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <div class="social-media-icons"> <a href="#" class="fa fa-facebook"></a> <a href="#" class="fa fa-twitter"></a> <a href="#" class="fa fa-instagram"></a> </div> 

Read more about !important here

Answer 2

give !important to override .social-media-icons:hover a property

 .fa { padding: 10px; font-size: 15px; width: 20px; text-align: center; text-decoration: none; border-radius: 50%; background: black; color: white; } .fa:hover { transition: background 0.2 ease!important; background: black!important; } .social-media-icons:hover a { transition: background 0.2s ease; background: #cccccc; } 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <div class="social-media-icons"> <a href="#" class="fa fa-facebook"></a> <a href="#" class="fa fa-twitter"></a> <a href="#" class="fa fa-instagram"></a> </div> 

Answer 3

Try this one.

 .fa { padding: 10px; font-size: 15px; width: 20px; text-align: center; text-decoration: none; border-radius: 50%; background: black; color: white; } .social-media-icons:hover .fa{ background: #cccccc; } .social-media-icons:hover .fa:hover{ background: black; } 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <div class="social-media-icons"> <a href="#" class="fa fa-facebook"></a> <a href="#" class="fa fa-twitter"></a> <a href="#" class="fa fa-instagram"></a> </div> 

Answer 4

You need to have a correct css specificity to let the specific one overwrite the other style. (carefully to use !important )

Also, if you want to imitate more accurately, you need to move the transition outside the :hover style.

.fa {
  padding: 10px;
  font-size: 15px;
  width: 20px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  background: black;
  color: white;
  transition: background 0.2s ease;
}

.social-media-icons a.fa:hover {
  background: black;
}


.social-media-icons:hover a {
  background: #cccccc;
}

http://jsfiddle.net/0dpeaj1x/