Псевдокласс hover в IE 6

Автор: Александр Головко Дата публикации: 19.03.2010

Задача

Научить IE6 изменять стили элемента при наведении мыши.

Теория

Для того, чтобы задать оформление при наведении мыши используется псевдокласс hover.

Собственно, на первый взгляд, задача решается элементарно:

a{
	color:#0f0;
}

a:hover{
	color:#f00;
}

Такой код сработает для любого из популярных браузеров. Ссылка при наведении поменяет цвет.

Но, как говорится, есть нюансы.

Попробуй применить этот прием не к ссылке, а к любому другому элементу. Например, на страничке есть span, нажатие на который по задумке дизайнера вызывает какое-либо действие (подробнее об этом можно почитать в статье «Не все то ссылки, что подчеркнуто»).

Тут нас ждет сюрприз! Один Отмирающий Браузер опять все испортит. Оказывается IE6 понимает hover только для тега a!

Решение

Стоит немного поискать, и можно найти ряд решений этой проблемы с помощью скриптов. Общая идея приемов как правило одинакова. Для элементов, у которых хочу реализовать hover, перехватываю событие наведения мыши и присваиваю какой-нибудь специальный класс. Соответственно при уходе мыши с элемента — класс убираю. Тем не менее подключать внешние скрипты для этой задачи кажется не совсем рациональным.

Наиболее красивым было бы в CSS использовать expression, причем описать его в отдельном файле, который подключается только для IE6 условными комментариями. Умрет IE6 — убрали файл и дело с концом!

Давайте, например, подчеркнем span, при наведении. Итак, для всех адекватных браузеров пишем:


span:hover{
	text-decoration:underline
}

Для заслуженного ветерана по борьбе с реализацией стандартов:

span{
behavior: expression(
          onmouseover = function() {this.className += ' hover'},
          onmouseout = function() {this.className = this.className.replace('hover', '')},
		  style.behavior = null
        );
}

span.hover{
	text-decoration:underline
}

Оптимизированный expression сработает только один раз — при загрузке страницы он «раздаст» всем спанам внутренние события onmouseover и onmouseout.

Демо пример. Проверено в:

  • IE 6-8
  • Firefox 2-3.5
  • Opera 9.5-10
  • Safari 3

Материал