css - 如何降低 fontawesome 文本的高度？

Question

我的网站正在使用 fontawesome。在网站上，其中一个图标 (fa-arrows-h) 被包裹在 span 标签中，基本上是这样的:

<span id="myArrow">
    <i class="fa fa-arrows-h"></i>
</span>

我在外部样式表中为此箭头设置了各种样式，包括 :hover 过渡。其他样式包括 font-size 41px 和箭头具有绝对位置。我还将光标样式设置为“指针”，并且红色箭头在悬停时变为橙色(使用 CSS3 样式:transition: all 0.5s ease 0s;)。

编辑:这里是所有的 CSS 规则:

#myArrow {
    display: none;
    font-size: 41px;
    position: absolute;
    z-index: 100;
    color: red;
    transition: all 0.5s ease 0s;
}

#myArrow:hover {
    color:orange;
    cursor:pointer;
}

这里是一些淡化箭头的 jQuery:

$("#myArrow").css({"left" : (o.left + 740) + "px", "top" : (o.top) + "px"}).fadeIn(500);

一件烦人的事是悬停效果出现在文本上方/下方约 20 像素处。也就是说，当光标底部接触到箭头时，或者光标尖端位于箭头下方大约 20 像素处时，会发生悬停过渡。

我尝试了各种方法，甚至将 span 和 i 的样式设置为

style="line-height:0;height:0"

并且箭头仍然出现，具有与上述相同的悬停问题(我也分别为两个标签尝试了这种样式)。

我认为问题也可能与 css 显示有关，所以我尝试将 span 和 i 都设置为

- block
- inline
- inline-block

没有成功。

我也将两个标签都设置为 padding:0 但没有成功。

请注意，这个 20px-away 的悬停过渡只发生在垂直方向；当水平接近箭头(从左或右)时，悬停过渡发生在用户实际悬停在图标上时。

谁能建议我如何在用户从上方或下方接近此图标并实际悬停在 fontawesome 图标上时发生悬停过渡，而不是当光标距离 20 像素时发生？

Answer 1

虽然不是很优雅，但我只是简单地更改了 #myArrow 的高度并将其溢出设置为隐藏，然后我使用边距将 i 元素定位在其中。

#myArrow {
    font-size: 41px;
    position: absolute;
    z-index: 100;
    color: red;
    transition: all 0.5s ease 0s;
}

#myArrow:hover {
    color:orange;
    cursor:pointer;
}

#myArrow {
    height:20px;
    overflow:hidden;
}

#myArrow i {
    margin-top:-10px;
    display:block;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<span id="myArrow">
    <i class="fa fa-arrows-h"></i>
</span>