Как получить событие при наведении курсора CSS в IE, когда мышь находится над текстом элемента ввода? - PullRequest
Новая
       0

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

6 голосов
/ 08 марта 2011

Используя IE с приведенным ниже HTML-кодом, я не могу заставить фон ввода изменить цвет на красный, если навести курсор мыши сразу на слово «Тест». Однако он меняется на красный, если навести курсор на область справа от слова «Тест», но все же в пределах элемента ввода. Этого не происходит в Firefox или Chrome. Как правильно определить мои стили для правильной работы в 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 ]

2 голосов
/ 28 декабря 2011

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

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

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

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

input:hover { border: 1px solid transparent; }
2 голосов
/ 07 сентября 2012 
<!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">

Это включит поддержку :hover и другие вещи для IE

2 голосов
/ 08 марта 2011

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

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

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

1 голос
/ 10 мая 2012

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

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

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

http://jsfiddle.net/q7Ymj/

0 голосов
/ 08 марта 2011

Укажите высоту и ширину поля ввода 

input { border: 0px; margin:0; padding:0;width:200px;height:25px; }
0 голосов
/ 08 марта 2011

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...