如何在鼠标悬停在输入元素文本上时，在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>
IE只支持：悬停在链接上。你必须用js改变风格。
不完全正确，请参阅我的答案。 – 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">
即使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:17:16
这似乎是IE汉族拖动悬停事件。在这个例子中，我将悬停改为form:hover input，无论你身在何处都应该触发。但它仍然是越野车。
在我的测试中我发现，边境触发悬停，然后它允许的工作。“但是，您仍然可以将鼠标快速移动到文本的中心并重现错误。所以这告诉我整体的实现是错误的。
我能想出的最佳解决方法是使用透明边框。这当然受到我刚刚提到的移动鼠标快速错误的影响，但它总比没有好。如果你真的需要0px边框，我怀疑js解决方案可以很容易地设计出来。
input:hover { border: 1px solid transparent; }
您可以使用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");
});
});
<!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
四个答案为止已经拿到了棒的右端的无
: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