Chrome瀏覽器不會應用CSS hover樣式

在谷歌瀏覽器中，當鼠標左鍵按住CSS懸停狀態沒有被觸發，如下所示：Chrome瀏覽器不會應用CSS hover樣式

a:hover { 
 
    color: red; 
 
}

<a href="http://www.jsfiddle.net">words</a>

http://jsfiddle.net/RHGG6/1/

此問題不會發生在任何FF8或IE9。這是有問題的，因爲我正在實施拖放操作並使用CSS來突出顯示放置目標。我可以在JavaScript中做到這一點很平凡，但對於本質上是CSS問題的人來說，這看起來很笨拙。是否有任何解決方法？

來源

2011-11-08 sslepian

它有什麼不同？有人應該按住鼠標左鍵的唯一原因是在頁面上突出顯示文本或其他內容。你擔心一些無關緊要的事情。 – Purag

在拖動操作過程中按住鼠標左鍵。 – Chris

這不是[與Chrome的文本選擇衝突]（http://stackoverflow.com/questions/11106955/change-cursor-over-html5-canvas-when-dragging-in-chrome），是嗎？ –

當我使用Chrome 17.0.948.0（Developer Build 111321）Ubuntu 10.04進行鼠標懸停時，鏈接變爲紅色，因此您可能需要更新Chrome。在相關說明中，hover僞類適用於鼠標指針正在HOVERED的元素。如果在單擊鏈接時按住鼠標按鈕的同時應用樣式，請使用：active僞類。我不確定爲什麼FF和IE的行爲不同。

來源

2011-12-13 01:08:32

當鼠標左鍵被按下時，是不是應該處於活動狀態的元素？這裏的區別在於Firefox和IE允許從懸停狀態繼承活動狀態，而Chrome則不允許。在CSS中，活動狀態可以使用：active僞類進行控制。您需要明確設置活動狀態的樣式以確保瀏覽器之間的一致性。

來源

2012-01-08 04:13:52 user372719

我檢查了Safari和Opera，它們的行爲就像IE9和Firefox一樣。 Chrome瀏覽器似乎是唯一可以這種方式運行的瀏覽器。我能夠得到所需行爲的唯一方法是使用Javascript。對於：active僞類的建議絕對行不通，我認爲他們誤解了這個問題。奇怪的是，當按住鼠標右鍵時，鼠標懸停在Chrome中，而左鍵不是。去搞清楚。

來源

2012-03-30 05:51:26 supercoco

-3

您正在尋找：active僞類。：懸停只會在節點被鼠標懸停時激活。：只有當節點被選擇或點擊時，激活纔會觸發。

這裏的的jsfiddle：http://jsfiddle.net/RHGG6/21/

來源

2012-06-06 19:02:35 Casualbot

不知道爲什麼有人高估了這一點。它沒有解決這個問題（猜想肖恩誤解了）。 – logidelic

從一個小打轉轉，看來，如果在移動元素時左鍵保持在Windows7中的Chrome 30.0.1599.69 M不產生MouseEnter事件。因此，依靠onmouseenter事件給出與使用css相同的結果 - 也許這個（非觸發）事件用於向css引擎發出某些需要更改的信號。

無論如何，你可以添加代碼來處理mousemove和mouseout事件。我只是用js設置文本顏色，儘管切換類的東西可能是更好的選擇。至少js會使用css應該使用的時間，所以它不會全部開銷，儘管它在每次鼠標移動時都會重新執行它。

也許你可以在你想要刪除的處理程序中使用removeEventListener。如果是這樣，您可以附加js以使用addEventListener處理事件，並在頁面加載時附加到兩個事件。當觸發onmousemove事件時，您可以更改樣式，然後刪除處理程序。然後，在mouseout事件觸發時，您可以恢復樣式並重新附加onmove處理程序。如果試圖從事件中刪除處理程序，處理程序本身會失敗，但只能嘗試，我不會感到驚訝。它只會向js中添加幾個字節，但會極大地提高效率（在鏈接方面而不是在整個頁面方面） - 如果鼠標在鏈接上移動到100％時效果可能非常差 - 即樣式每次進入/離開週期只設置一次並清除一次。

<a href="http://www.jsfiddle.net" onmousemove = "this.style.color='red'" onmouseout = "this.style.color=''">words</a>

適用於我 - 注意：只在win7中使用chrome進行測試。

來源

2013-10-17 06:18:32 enhzflep

目前這是一個可以接受的解決方法，但如果您遇到以下問題，請投票解決它：https://bugs.chromium.org/p/chromium/issues/detail?id=122746 –

Chrome瀏覽器不會應用CSS hover樣式

回答

相關問題