gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 17:22:40 26 4
gpt4 key购买 nike

我的网站正在使用 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 像素处时,会发生悬停过渡。

我尝试了各种方法,甚至将 spani 的样式设置为

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

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

我认为问题也可能与 css 显示有关,所以我尝试将 spani 都设置为

- block
- inline
- inline-block

没有成功。

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

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

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

最佳答案

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

关于css - 如何降低 fontawesome 文本的高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27743637/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com