如何减少字体字体的高度？

The One and Only ChemistryBlob 发表于 Dev

唯一的化学斑点

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

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

我在外部样式表中为此箭头设置了各种样式，包括：hover过渡。其他样式包括字体大小为41px，箭头的位置为绝对位置。我还将光标设置为“指针”，并将红色箭头变成了橙色（使用CSS3样式：transition：所有0.5s缓解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);

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

我曾尝试过各种东西，甚至设置样式为两个span及i以

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

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

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

- block
- inline
- inline-block

没有成功。

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

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

任何人都可以提出一个建议，当用户从上方或下方接近此图标并实际上将鼠标悬停在fontawesome图标上时，而不是在光标距20px处时，如何进行悬停过渡？

马塞洛

虽然不是很优雅，但我只是更改了#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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。