css - 悬停在字体真棒的图标上：如何更改图标的大小或边缘？

Question

我有以下代码，字体真棒：

HTML：

<div> 
    <i class='icon-chevron-down font-big'></i>
</div>

<div>
    <i class='icon-chevron-down font-big'></i>
</div>

CSS：

.font-big {
    font-size: 30px;
    line-height: 6px;
}
.font-big:hover {
    opacity: .5;
}

问题是图标重叠，正如您在这个 jsFiddle 上看到的那样。

我怎样才能使悬停行为正确：每个图标的边界不应延伸和重叠？

Answer 1

看看这个 jsfiddle：http: //jsfiddle.net/fTdRS/

您可以尝试将图标放入类似于此示例的内部 div 中。

div.inner {
    xdisplay: block;
    width: 280px;
    height: 80px;
    display:table-cell;
    vertical-align:middle;

}