Как заставить событие hover CSS запускаться в IE, когда мышь находится над текстом элемента ввода?

Используя IE с HTML ниже, я не могу заставить фон ввода изменить на красный, если я наведите мышь сразу над словом «Тест». Однако он меняется на красный, если я навешиваю область справа от слова «Тест», но все же находится в пределах входного элемента. Этого не происходит в Firefox или Chrome. Каков правильный способ определения моих стилей, чтобы это правильно работало в IE?

     input { border: 0px; margin:0; padding:0; } input:hover { background: red }       

Это похоже на ошибку в том, как IE обрабатывает событие hover. В этом примере я изменил наведение на form:hover input который должен срабатывать независимо от того, где вы находитесь. Но он все еще неисправен.

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

В моем тестировании я обнаружил, что граница запускает зависание, которое затем позволяет ему «работать». Тем не менее, вы все равно можете быстро перемещать мышь в центр текста и воспроизводить ошибку. Это говорит о том, что общая реализация прослушивается.

Лучшим обходным решением, которое я мог бы придумать, является использование прозрачной границы. Это, конечно, страдает от быстрой ошибки мыши, о которой я только что упомянул, но это лучше, чем ничего. Я подозреваю, что решение js можно легко разработать, если вам действительно нужна граница 0px.

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

Это фактически вызвано тем, что IE не распознает class :hover psuedo для элементов без привязки ( ), если вы не используете тип документа STRICT :

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

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

 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

Это позволит :hover поддерживать :hover и другие вещи для IE

Вы можете использовать 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"); }); }); 

Обеспечить высоту и ширину windows ввода

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

Это проблема с вашим DOCTYPE как указал Дастин Лэйн.

Поэкспериментируйте с типом HTML 5 или некоторыми другими.

http://jsfiddle.net/q7Ymj/

IE поддерживает только: наведение на ссылки. Вам нужно будет изменить стиль с помощью js.