Question

使用IE下面的HTML，如果我将鼠标悬停在单词“Test”上，我无法将输入的背景更改为红色。但是，如果我将鼠标悬停在单词“Test”右侧的区域上，但仍然在输入元素的范围内，则会变为红色。这在Firefox或Chrome中不会发生。定义我的样式以使其在IE中正常工作的正确方法是什么？

<!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>

Answer 1

这实际上是由于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/

Answer 2

这似乎是IE处理悬停事件的错误。在这个例子中，我将悬停更改为form:hover input，无论您身在何处，都应该触发。但它仍然是马车。

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

在我的测试中，我发现边界触发了悬停，然后允许它“工作”。但是，您仍然可以将鼠标快速移动到文本的中心并重现错误。所以这告诉我整体实施被窃听。

我能想到的最好的解决方法是使用透明边框。这当然会受到我刚刚提到的移动鼠标快速错误的影响，但它总比没有好。我怀疑如果你真的需要0px边框，可以很容易地设计一个js解决方案。

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

Answer 3

<!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支持和其他内容

Answer 4

您可以使用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");
  });
});

Answer 5

提供输入框的高度和宽度

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

Answer 6

正如Dustin Laine指出的那样，这是你DOCTYPE的一个问题。

尝试HTML 5 doctype或其他一些。

http://jsfiddle.net/q7Ymj/

Answer 7

IE仅支持：将鼠标悬停在链接上。你必须用js改变风格。

当鼠标悬停在输入元素的文本上时，如何在IE中触发CSS悬停事件？

7 个答案: