当 <i> 在按钮内时,悬停在 Firefox 上不起作用
Hover doesn't work on Firefox when <i> is inside a button
我有一个非常简单的 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
class:
.btn:hover {
color:red;
}
我有一个非常简单的 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
class:
.btn:hover {
color:red;
}