当 <i> 在按钮内时，悬停在 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 class:

.btn:hover {
    color:red;
}

JSFiddle.

当 <i> 在按钮内时，悬停在 Firefox 上不起作用

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

javascript

twitter-bootstrap-3

font-awesome