Question

嘿，我的网页上有一些社交媒体图标，我希望它在默认情况下具有白色边框，透明背景和白色徽标。然后悬停有那个开关，所以你得到一个白色边框，白色背景和透明徽标。但似乎由于徽标在悬停时是透明的，所以你看到的只是一个白色圆圈。如何才能使透明徽标（即脸谱中的f）在悬停时仍然可以查看。This page has what I'm going for（向下滚动到底）我已经包含了迄今为止我所拥有的一个jsfiddle 。

https://jsfiddle.net/p0sjxqht/

HTML：

<h2>Style Social Media Buttons</h2>


<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-pinterest"></a>

CSS：

body{
background-color: #333;

}
.fa {
  padding: 20px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
}

.fa:hover {
background: white;
color:transparent;
}

.fa {
border:solid;
border-width:3px;
border-color:white;
background: transparent;
color: white;
}

Answer 1

使用与背景颜色相同的颜色：

.fa:hover {
    background: white;
    color: #333;
}

Answer 2

只需添加从父节点继承的颜色

.fa:hover {
    background: white;
    color:inherit;
}

最后添加父div颜色作为页面背景

社交媒体图标透明度问题

2 个答案: