时间戳

首页 > 解决方案 > 将鼠标悬停在父 div 上时 CSS 淡化子元素，然后将鼠标悬停在子元素上时再次更改

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

问题描述

我正在尝试在此网站上的社交媒体按钮上获得类似的效果：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/ 如何获得预期的效果？先感谢您。

标签： htmlcss

解决方案

通过添加!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 这里

推荐阅读