Простейший скрипт для реализации hover-эффекта для любого элемента в Internet Explorer 6

Внимание: рекомендуется обновленная версия данной статьи.

Несмотря на то, что данное решение уже опубликовано в РУнете не мной, я просто не могу не написать о нем, т.к. решение, на мой взгляд, достойно внимания, и нужно его популяризовать посредством моего блога.

Я постоянно слежу за материалами по HTML и CSS верстке, но почему-то до недавнего времени мне нигде не попался простейший способ создания ховер-эффекта (:hover) в самом часто упоминаемом веб-разработчиками браузере IE6, который, как мы знаем, данный селектор поддерживает только для тега ссылки <a>.

Не знаю, то ли это решение объективно считается не таким уж хорошим, то ли я хожу не теми дорогами Интернета, но я лишь месяц назад увидел его в блоге Сергея Гордиенко, который, как оказалась, пользуется этим скриптом уже давно (а со мной не поделился =).

До сей поры мне приходилось применять громоздкие скрипты, данный же скрипт состоит из всего лишь 6 строк:

<attach for=element event=onmouseover handler=topm>
<attach for=element event=onmouseout handler=verm>
<script>
	function topm(){element.className='hover';}
	function verm(){element.className='';}
</script>

Наверное, его можно и в одну строку вытянуть =), суть не в этом, главное, что его размер ничтожно мал по сравнению с альтернативными решениями, известными мне на сегодняшний день.

Данный скрипт нужно сохранить в файл с любым названием, но обязательно с расширением .htc, например, ie6hover.htc.

Как пользоваться скриптом

Для начала его необходимо подключить к файлу стилей, например, так (если нужно предусмотреть возможность его применения к любому html-элементу):

* {behavior:url("ie6hover.htc")}

Либо, например, вот так (если хотим его применить только к конкретному элементу):

li {behavior:url("ie6hover.htc")}

А непосредственно реализация ховер-эффекта делается следующим образом. Например, если это меню с выпадающим списком:

li:hover ul, /* для современных браузеров */
li.hover ul { /* для Internet Explorer 6 */
	display: block
}

Обратите внимание, что класс .hover – это то, что прописано в самом скрипте. По желанию, название этого класса можно заменить.

Как видите, все максимально просто.