CSS图标悬停创建一个框

Question

我目前有一个图标标记，我正在尝试为图标添加:hover样式。它来自font-awesome库。我的css很直接。

i:hover {
    background-color: white;
    box-sizing: border-box;
}

当我将鼠标悬停在我的图标上时，我希望只有图标本身具有悬停效果，而不是我的图标周围的边界框。我怎么能做到这一点？

Answer 1

试试这个

＆＃13;

＆＃13;

i{
color:yellow;
font-size:22px;
}
a:hover .fa-google{
color:red;
}
.fa-facebook-square:hover{
color:blue;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
If its inside an element

<br>
<a href="#"><i class="fa fa-google"></i> Hover Here</a>
<br>
Without another element
<br>
<i class="fa fa-facebook-square"></i>&nbsp;Hover the Icon

＆＃13;

＆＃13;

＆＃13;