我将Font Awesome用作图标,并且在悬停时这是我喜欢的结果enter image description here

当我选择的链接是enter image description here时,我也遇到这个问题

我使用引导程序



.nav > li > a:hover
{
    background-color: transparent;
}
.iconetwitter
{
    color: #ffffff;
    width: auto;
    height: 33px;
    position: relative;
    border-radius: 5px;
    transition: background-color color 0.2s, font-size 0.2s , ease-in-out;
}
.iconetwitter:hover , .iconetwitter:focus ,.iconetwitter:active
{
    color: #1DA1F2;
    background-color: white;
}

<ul class="nav">
                    <li class="contacteicone col-md-3">
                        <a href="#" class="monicone">
                            <span class="fa-stack fa-lg">
                                <i class="fa fa-twitter-square iconetwitter fa-stack-2x"></i>
                            </span>
                        </a>
                    </li>
</ul>

最佳答案

得到它了...

奇怪的悬停状态是由字体真棒图标的背景颜色引起的。背景大于字符。使用line-height纠正此问题,如下所示:

.fa {line-height: 0.85em;}


或使用更好的解决方案在这里描述:https://stackoverflow.com/a/27382026/2397550。然后,您应该对下面的正方形使用此图标:http://fontawesome.io/icon/square/

焦点图标后面的白色区域是因为您这样做:

.nav > li > a:hover {background-color: transparent;}


应该是:

.nav > li > a:hover, .nav > li > a:focus {background-color: transparent;}

10-05 20:40
查看更多