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

2019-06-18 15:48发布

站内文章 / HTML/CSS
9 0 0

问题:

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>

回答1:

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; }


回答2:

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/



回答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">

This will enable :hover support and other stuff for IE



回答4:

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");
  });
});


回答5:

Provide height and width of Input box

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


回答6:

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/



回答7:

IE only supports :hover on links. You'll have to change the style with js.



标签： html css internet-explorer
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~