html - 将鼠标悬停在父级 div 上时，CSS 会淡化子级，然后在将鼠标悬停在子级上时再次更改

Question

我正在尝试获得类似于本网站社交媒体按钮上的效果:http://www.goldsquare.co/about (女孩图片下方的图标)。当我将鼠标悬停在父级 div 上时，我的 CSS 现在让按钮淡化为灰色，但当我将鼠标悬停在它们上方时，单个按钮不会像它们应该的那样变成黑色。

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;
}

您可以在这个 jfiddle 上看到它的运行情况:http://jsfiddle.net/brettfisher/fcn4d097/8/ 我怎样才能得到想要的效果？提前谢谢你。

Answer 1

通过在.fa:hover 上添加 !important。您可以达到预期的结果。

检查以下 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>

阅读有关 !important 的更多信息 here