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

【问题标题】：Hover doesn't work on Firefox when <i> is inside a button当 <i> 在按钮内时，悬停在 Firefox 上不起作用
【发布时间】：2015-11-15 03:22:32
【问题描述】：

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

这是 Firefox 中的错误吗？
有没有办法解决这个问题？

小提琴：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");
});

谢谢

【问题讨论】：

是的，这似乎是 Firefox 中的一个错误。似乎唯一的解决方法是将:hover 伪类添加到父.btn 元素.btn:hover .fa-battery-full - jsfiddle.net/nwkdvfp0 这是一个related question。

标签： javascript twitter-bootstrap-3 font-awesome

【解决方案1】：

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

.btn:hover {
    color:red;
}

JSFiddle.

【讨论】：

这是我一直在寻找的答案。非常感谢。