懸停在Firefox上不起作用<i>位於按鈕內

我有一個非常簡單的Bootstrap按鈕，裏面有一個字體超棒的圖標。我需要捕獲懸停事件以更改圖標的顏色。在IE和Chrome中運行得非常好，但在Firefox上不能運行。我已經嘗試了很多東西，包括將<i>放在一個範圍內，但對Firefox沒有任何作用。
我還在mouseEnter事件中添加了一個jQuery偵聽器，就像沒有事件觸發的證明一樣。懸停在Firefox上不起作用<i>位於按鈕內

這是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"); 
});

感謝

來源

2015-11-15 Alexander

呀，這似乎是在Firefox中的錯誤。似乎唯一的解決辦法是將'：hover'僞類添加到父'.btn'元素'.btn：hover .fa-battery-full'中 - http://jsfiddle.net/nwkdvfp0/是[相關問題]（http://stackoverflow.com/questions/5965810/buttonhover-not-working-in-firefox）。 –

您可以添加懸停到您的btn類：

.btn:hover { 
    color:red; 
}

3210

來源

2015-11-15 05:41:57

這是我一直在尋找的答案。非常感謝。 – Alexander

懸停在Firefox上不起作用<i>位於按鈕內

回答

相關問題