在我网站的页脚 http://www.stefaanoyen.be (左栏)我有一些社交媒体图标,它们是一种图标字体。悬停时,我希望圆圈为红色,其中的图标为白色。红色圆圈有效,但它们后面有一个白色方 block 。如何将白色限制为图标/圆圈的形状?
这是我的 HTLM:
<p class="share"><a href="#">l</a> <a href="#">i</a> <a href="#">g</a> <a href="#">f</a></p>
这是我的 CSS:
.share a {
color: #ececec;
text-decoration: none;
font: 50px 'socialicoregular', Helvetica, sans-serif;
}
.share:hover {
cursor: pointer;
}
.share a:hover {
color: #B61618;
text-decoration: none;
font: 50px 'socialicoregular', Helvetica, sans-serif;
background-color: #fff;
}
非常感谢您的帮助!
史蒂芬
最佳答案
这个没有简单的解决方案,因为您只依赖于一种字体。您可以尝试添加一个 border-radius
(您的 font-size
设置为 50px,因此 25px 的半径可能会做到这一点,但您将不得不尝试一下)到 .share a:hover
元素。
关于css - 悬停时的图标字体背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15660586/