悬停不会'当<i>在一个按钮里面

Hover doesn't work on Firefox when <i> is inside a button

本文关键字：一个 按钮 gt lt 悬停      更新时间：2023-09-26

我有一个非常简单的Bootstrap按钮，里面有一个字体很棒的图标。我需要捕捉悬停事件来更改图标的颜色。适用于IE和chrome，但不适用于Firefox。我尝试了很多方法，包括将<i>放在一个跨度内，但对Firefox无效
我还在mouseEnter事件上添加了一个jQuery监听器，以证明没有触发任何事件。

这是Firefox中的错误吗
有办法绕过这个吗？

Fiddle：http://jsfiddle.net/dft2nqqd/2/

HTML

<button class="btn btn-default no-left-border current-location-button"  type="button">
<i class="fa fa-battery-full"></i>
</button>

CSS

.fa-battery-full {
    font-size: 24px;
}
.fa-battery-full:hover {
    color:red;
}

jQuery

$(".fa-battery-empty").mouseenter(function(){
   alert("Hover");
});

感谢

您可以在btn类中添加悬停：

.btn:hover {
    color:red;
}

JSFiddle。

相关文章：