Простейший скрипт для реализации 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 — это то, что прописано в самом скрипте. По желанию, название этого класса можно заменить.

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

Комментарии (63)
  1. 1
    Denis

    Ребят, отметьте в статье, что не стоит цеплять htc’цешку на селектор *. Попробуйте взять очень большую страничку с плотной верстокой(сохраните на винт, например, страницу хабра с большим количестов комментов) и добавьте в стили: «* { behavior:url(«какой нибудь.htc»); }»
    Посмотрите что станет с ишаком. На каждый встреченный html-элемент (даже
    будет запрашиваться и выполняться скрипт.
    Такие вещи (behavior и любые expression) всегда применяются точечно — если они нужены где-то, то надо создать класс и только на него и вешать.
    Удачи.

  2. 2
    Филипп

    Такие вещи (behavior и любые expression) всегда применяются точечно — если они нужены где-то, то надо создать класс и только на него и вешать.

    Вот за это — огромное спасибо!

  3. 3
    Sync

    Мда, прочитал все коментарии поста и был очень удивлен тому что Jman говорил о реальных вещах которые и доказательств то не требуют, а ему както сразу и неповерили. Если вы только верстаете и не будете делать функционал то не спешите цеплять на все елементы id, лучше сделайте через class, а программер, если понадобится, сам потом прицепит нужный ему айдишник и по нем разрулит js.
    Вот решение которое я когдато применял:
    выносим в ie6.css


    #navigation li{
    behavior: expression(
    this.onmouseover = new Function("this.className += ' hover'"),
    this.onmouseout = new Function("this.className = this.className.replace(' hover','')"),
    this.style.behavior = null);
    }

    ну а в обычном все как и прежде


    #navigation li:hover,
    #navigation li.hover{
    background:#f00;
    }

    Но все же это нестоит применять. Так как експрешн будет тормозить работу браузера, заметно будет на больших страницах