How to get CSS hover event to trigger in IE when m

2019-06-18 15:21发布

站内问答 / HTML/CSS
808 7 5

Using IE with the HTML below, I can't get the input's background to change to red if I hover my mouse immediately over the word "Test". It does, however, change to red if I hover over the area to the right of the word "Test" but still within the bounds of the input element. This doesn't happen in Firefox or Chrome. What is the proper way to define my styles to get this to work correctly in 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>

7条回答
We Are One
2楼-- · 2019-06-18 15:32

Provide height and width of Input box

input { border: 0px; margin:0; padding:0;width:200px;height:25px; }
查看更多
0人赞 添加讨论(0) 举报
Evening l夕情丶
3楼-- · 2019-06-18 15:37

This appears to be a bug in how IE handles the hover event. In this example I changed the hover to form:hover input which should trigger no matter where you are. But it is still buggy.

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

In my testing I found that the border triggers the hover which then allows it to 'work.' However, you can still move your mouse very quickly into the center of the text and reproduce the bug. So that tells me the overall implementation is bugged.

The best workaround I could come up with is to use a transparent border. This of course suffers from the moving mouse fast bug I just mentioned, but it is better than nothing. I suspect a js solution could be easily devised if you really need the 0px border.

input:hover { border: 1px solid transparent; }
查看更多
0人赞 添加讨论(0) 举报
做自己的国王
4楼-- · 2019-06-18 15:37

You can use javascript to enable that.

//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");
  });
});
查看更多
0人赞 添加讨论(0) 举报
冷血范
5楼-- · 2019-06-18 15:46

This is a problem with your DOCTYPE as Dustin Laine pointed out.

Experiment with the HTML 5 doctype or some others.

http://jsfiddle.net/q7Ymj/

查看更多
0人赞 添加讨论(0) 举报
放荡不羁爱自由
6楼-- · 2019-06-18 15:47

This is actually caused by the fact that IE does not recognize the :hover psuedo class on non-anchor (<a>) elements unless you use STRICT document type:

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

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

查看更多
0人赞 添加讨论(0) 举报
Explosion°爆炸
7楼-- · 2019-06-18 15:50 
<!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">

This will enable :hover support and other stuff for IE

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)