Menu
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>
341
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; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
