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

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

检查以下小提琴：

.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

Answer 2

赋予！important覆盖.social-media-icons:hover a属性

.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

尝试这个。

.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

您需要具有正确的CSS specificity，以使特定的CSS覆盖另一种样式。（请谨慎使用!important）

此外，如果您想更精确地模仿，则需要将transition移到:hover样式之外。

.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/

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

4 个答案: