Question

我的网站正在使用fontawesome。在网站上，其中一个图标（fa-arrows-h）包含在span标记中，基本上是这样的：

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

我在外部样式表中为此箭头设置了各种样式，包括：hover过渡。其他样式包括font-size 41px和箭头的绝对位置。我还将光标设置为“指针”，并且红色箭头在悬停时变为橙色（使用CSS3样式：过渡：全部0.5s缓动0;）。

编辑：以下是所有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);

令人讨厌的是，悬停效果发生在文本上方/下方约20px处。也就是说，当光标的底部接触箭头，或者光标的尖端大约比箭头低20px时，就会发生悬停过渡。

我尝试过各种各样的事情，甚至为span和i设置样式

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

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

我认为问题也可能出在css显示屏上，所以我尝试将span和i同时设置为

- block
- inline
- inline-block

没有成功。

我还将两个标签都设置为填充：0但没有成功。

请注意，此20px离开的悬停过渡仅垂直发生;当水平接近箭头（从左或右）时，当用户实际悬停在图标上时，就会发生悬停转换。

任何人都可以建议当用户从上方或下方接近此图标并实际悬停在fontawesome图标上时，我会如何进行悬停转换，而不是当光标距离20px时？

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>

如何降低fontawesome文本的高度？

1 个答案: