How to get CSS hover event to trigger in IE when mouse is over text of input element?

Question

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>

Have you tried setting the input to display:block? I've noticed that kind of behavior with inline elements. — Parrots
– Parrots, Commented Mar 8, 2011 at 15:09
None of the four answers so far has got the right end of the stick. The described issue happens in IE8 and IE9 (I didn't test older). If you hover directly over the text in the input element, the hover doesn't work. — thirtydot
– thirtydot, Commented Mar 8, 2011 at 15:24
what if you use a class, let's say theInput and then use theInput:hover? Does it produce the same result? — Bazzz
– Bazzz, Commented Mar 8, 2011 at 15:25
This seems to be a bug in IE9. It works for me when I hover over the empty part of the input element, or when I remove the input { border: 0px; margin:0; padding:0; } declaration completely. I have not been able to test on IE8. — Peter
– Peter, Commented Mar 8, 2011 at 16:17

mrtsherman · Accepted Answer · 2011-12-28 06:53:41Z

2

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

answered Dec 28, 2011 at 6:53

mrtsherman

40k23 gold badges90 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DarkAjax · Accepted Answer · 2014-06-24 20:39:54Z

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/

edited Jun 24, 2014 at 20:39

DarkAjax

16.3k11 gold badges60 silver badges67 bronze badges

answered Mar 8, 2011 at 15:12

Dustin Laine

38.7k10 gold badges90 silver badges125 bronze badges

3 Comments

Jaroslav Jandek Over a year ago

Even IE8 doesn't evaluate hover over input's text.

Matt Thalman Over a year ago

I'm actually using IE 9 beta and adding the STRICT doc type doesn't help.

Dustin Laine Over a year ago

@Jaroslav Jandek - Correct, I updated my answer. It worked in jsfiddle, but only first time, so I think it is just a bug there.

DarkAjax · Accepted Answer · 2014-06-24 20:40:09Z

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

This will enable :hover support and other stuff for IE

edited Jun 24, 2014 at 20:40

DarkAjax

16.3k11 gold badges60 silver badges67 bronze badges

answered Sep 7, 2012 at 11:20

Kornilov Ruslan

1431 silver badge3 bronze badges

Comments

zhujy_8833 · Accepted Answer · 2012-05-10 00:25:06Z

1

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

answered May 10, 2012 at 0:25

zhujy_8833

5714 silver badges6 bronze badges

Comments

San · Accepted Answer · 2011-03-08 15:13:35Z

0

Provide height and width of Input box

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

answered Mar 8, 2011 at 15:13

San

1254 silver badges10 bronze badges

1 Comment

Matt Thalman Over a year ago

This only works if you move the mouse very slowly. If you quickly move the mouse to be over the text, it doesn't trigger the hover.

Ricardo Souza · Accepted Answer · 2012-05-19 23:19:05Z

0

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/

answered May 19, 2012 at 23:19

Ricardo Souza

16.5k6 gold badges40 silver badges70 bronze badges

Comments

Jordan · Accepted Answer · 2011-03-08 15:11:26Z

-1

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

answered Mar 8, 2011 at 15:11

Jordan

1,2388 silver badges8 bronze badges

1 Comment

Jordan Over a year ago

Awesome. I have to commit to memory that IE != IE 6

Collectives™ on Stack Overflow

How to get CSS hover event to trigger in IE when mouse is over text of input element?

7 Answers 7

Comments

3 Comments

Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

3 Comments

Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related