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

Question

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

6

使用以下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>

- Matt Thalman

你尝试过将输入设置为display:block吗？我注意到行内元素会出现这种行为。 - Parrots

迄今为止，四个答案都没有抓住问题的关键。描述的问题发生在IE8和IE9中（我没有测试更早的版本）。如果你直接悬停在input元素中的文本上，悬停效果不起作用。 - thirtydot

如果您使用一个类，比如theInput，然后使用theInput:hover，会产生相同的结果吗？ - Bazzz

这似乎是IE9中的一个错误。当我将鼠标悬停在输入元素的空白部分上时，它对我有效，或者当我完全删除input { border: 0px; margin:0; padding:0; }声明时。我还没有能够在IE8上进行测试。 - Peter

我在div上使用hover时遇到了相反的问题。在IE9中，只有当鼠标悬停在div内的文本上时，才会触发悬停。在Chrome和FF4中它正常工作，但在IE9中却不行——至少在我的代码中是这样。编辑：好吧，看起来这是因为我的div背景是“透明”的。当我将背景设置为颜色时，它按预期工作。奇怪... - Benny Jobigan

显示剩余2条评论

7个回答

2

这似乎是 IE 处理 hover 事件的一个 bug。在这个例子中，我将 hover 更改为 form:hover input，它应该无论你在哪里都会触发。但它仍然有问题。

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

在我的测试中，我发现边框会触发悬停效果，然后才能让它“正常工作”。然而，你仍然可以非常快速地将鼠标移动到文本的中心并重现错误。所以这告诉我整体实现存在缺陷。

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

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

- mrtsherman

2

<!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支持和其他功能。

- Kornilov Ruslan

1

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

- zhujy_8833

0

正如Dustin Laine所指出的那样，这是与您的DOCTYPE有关的问题。

尝试使用HTML 5 doctype或其他一些doctype进行实验。

http://jsfiddle.net/q7Ymj/

- Ricardo Souza

0

提供输入框的高度和宽度

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

- San

只有在你非常慢地移动鼠标时才有效。如果你快速将鼠标移到文本上方，它不会触发悬停效果。 - Matt Thalman

-1

IE只支持对链接的:hover伪类，您必须使用JavaScript更改样式。

- Jordan

3

真棒。我必须记住IE！= IE 6。 - Jordan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dustin Laine · Accepted Answer

实际上，这是由于IE不会识别非锚点(<a>)元素上的:hover伪类，除非您使用STRICT文档类型：

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

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