如何在鼠標懸停在輸入元素文本上時，在IE中觸發CSS懸停事件？

如果將鼠標懸停在單詞「測試」上，我將IE與下面的HTML結合使用，無法將輸入的背景變爲紅色。但是，如果我將鼠標懸停在單詞「測試」右側的區域上，但仍位於輸入元素的範圍內，它會變爲紅色。這在Firefox或Chrome中不會發生。什麼是正確的方式來定義我的風格，以使其在IE中正常工作？如何在鼠標懸停在輸入元素文本上時，在IE中觸發CSS懸停事件？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
    <title></title> 
    <style type="text/css"> 
     input { border: 0px; margin:0; padding:0; } 
     input:hover { background: red } 
    </style> 
    </head> 
    <body> 
    <input type="text" value="Test" /> 
    </body> 
</html>

來源

2011-03-08 Matt Thalman

四個答案爲止已經拿到了棒的右端的無:hover支持和其他的東西。所描述的問題發生在IE8和IE9中（我沒有測試舊版本）。如果您將鼠標懸停在「輸入」元素的文本上，則懸停不起作用。 – thirtydot 2011-03-08 15:24:19

如果你使用一個類，讓我們說'theInput'，然後使用'theInput：hover'？它會產生相同的結果嗎？ – Bazzz 2011-03-08 15:25:53

我遇到了懸停在div上的相反問題。在IE9懸停時，只有鼠標懸停在div內的文本上時纔會激活。它在Chrome和FF4中運行良好，但不是IE9 - 至少使用我的代碼。編輯：好吧，似乎這是因爲我的div的背景是'透明'。當我將背景設置爲一種顏色時，它會按預期工作。怪異的... – 2011-05-30 04:50:03

-1

IE只支持：懸停在鏈接上。你必須用js改變風格。

來源

2011-03-08 15:11:26 Jordan

不完全正確，請參閱我的答案。 – 2011-03-08 15:14:42

太棒了。我必須承諾內存，即IE！= IE 6 – Jordan 2011-03-08 15:30:00

這實際上是由以下事實導致IE不能識別非錨:hover僞類（<a>）元素，除非您使用STRICT文檔類型：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

http://jsfiddle.net/durilai/Xb8Bg/1/

來源

2011-03-08 15:12:55

即使IE8不評估懸停輸入的文本。 – 2011-03-08 15:15:08

我實際上使用IE 9測試版，並且添加STRICT文檔類型並沒有幫助。 – 2011-03-08 15:17:45

@Jaroslav Jandek - 對，我更新了我的答案。它在jsfiddle中工作，但只是第一次，所以我認爲它只是一個錯誤。 – 2011-03-08 15:18:04

提供高度和輸入框的寬度

input { border: 0px; margin:0; padding:0;width:200px;height:25px; }

來源

2011-03-08 15:13:35 San

這隻適用於非常緩慢地移動鼠標的情況。如果快速移動鼠標以覆蓋文本，則不會觸發懸停。 – 2011-03-08 15:17:16

這似乎是IE漢族拖動懸停事件。在這個例子中，我將懸停改爲form:hover input，無論你身在何處都應該觸發。但它仍然是越野車。

http://jsfiddle.net/Xb8Bg/74/

在我的測試中我發現，邊境觸發懸停，然後它允許的工作。「但是，您仍然可以將鼠標快速移動到文本的中心並重現錯誤。所以這告訴我整體的實現是錯誤的。

我能想出的最佳解決方法是使用透明邊框。這當然受到我剛剛提到的移動鼠標快速錯誤的影響，但它總比沒有好。如果你真的需要0px邊框，我懷疑js解決方案可以很容易地設計出來。

input:hover { border: 1px solid transparent; }

來源

2011-12-28 06:53:41 mrtsherman

您可以使用javascript來啓用該功能。

//css 
input{ 
    border: 0px; 
    margin:0; 
    padding:0; 
} 

input.hover{ 
    background:red; 
} 

//javascript 
$(document).ready(function() { 
    var input = $("input"); 
    input.mouseover(function(e) {   
    $(this).addClass("hover"); 
    }).mouseout(function(e) { 
    $(this).removeClass("hover"); 
    }); 
});

來源

2012-05-10 00:25:06

這是一個問題，您的DOCTYPE爲達斯汀萊恩指出。

使用HTML 5文檔類型或其他一些實驗。

http://jsfiddle.net/q7Ymj/

來源

2012-05-19 23:19:05 rcdmk

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">

這將啓用IE

來源

2012-09-07 11:20:13

如何在鼠標懸停在輸入元素文本上時，在IE中觸發CSS懸停事件？

回答

相關問題