javascript - 当 位于按钮内时，悬停在 Firefox 上不起作用

Question

我有一个非常简单的 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");
});

谢谢

Answer 1

您可以将悬停添加到您的 btn 类:

.btn:hover {
    color:red;
}

JSFiddle.