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

Задача

Научить 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

Материал

• Скрипт: hover-эффект для любого элемента в Internet Explorer 6