Простейший скрипт для реализации hover-эффекта для любого элемента в Internet Explorer 6
Внимание: рекомендуется обновленная версия данной статьи.
Несмотря на то, что данное решение уже опубликовано в РУнете не мной, я просто не могу не написать о нем, т.к. решение, на мой взгляд, достойно внимания, и нужно его популяризовать посредством моего блога.
Я постоянно слежу за материалами по HTML и CSS верстке, но почему-то до недавнего времени мне нигде не попался простейший способ создания ховер-эффекта (:hover) в самом часто упоминаемом веб-разработчиками браузере IE6, который, как мы знаем, данный селектор поддерживает только для тега ссылки <a>.
Не знаю, то ли это решение объективно считается не таким уж хорошим, то ли я хожу не теми дорогами Интернета, но я лишь месяц назад увидел его в блоге Сергея Гордиенко, который, как оказалась, пользуется этим скриптом уже давно (а со мной не поделился =).
До сей поры мне приходилось применять громоздкие скрипты, данный же скрипт состоит из всего лишь 6 строк:
1 2 3 4 5 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-элементу):
1 | * {behavior:url("ie6hover.htc")} |
Либо, например, вот так (если хотим его применить только к конкретному элементу):
1 | li {behavior:url("ie6hover.htc")} |
А непосредственно реализация ховер-эффекта делается следующим образом. Например, если это меню с выпадающим списком:
1 2 3 4 | li:hover ul, /* для современных браузеров */ li.hover ul { /* для Internet Explorer 6 */ display: block } |
Обратите внимание, что класс .hover - это то, что прописано в самом скрипте. По желанию, название этого класса можно заменить.
Как видите, все максимально просто.
Ребят, отметьте в статье, что не стоит цеплять htc’цешку на селектор *. Попробуйте взять очень большую страничку с плотной верстокой(сохраните на винт, например, страницу хабра с большим количестов комментов) и добавьте в стили: “* { behavior:url(”какой нибудь.htc”); }”
Посмотрите что станет с ишаком. На каждый встреченный html-элемент (даже <br /> будет запрашиваться и выполняться скрипт.
Такие вещи (behavior и любые expression) всегда применяются точечно — если они нужены где-то, то надо создать класс и только на него и вешать.
Удачи.
Вот за это - огромное спасибо!
Мда, прочитал все коментарии поста и был очень удивлен тому что Jman говорил о реальных вещах которые и доказательств то не требуют, а ему както сразу и неповерили. Если вы только верстаете и не будете делать функционал то не спешите цеплять на все елементы id, лучше сделайте через class, а программер, если понадобится, сам потом прицепит нужный ему айдишник и по нем разрулит js.
Вот решение которое я когдато применял:
выносим в ie6.css
2
3
4
5
6
behavior: expression(
this.onmouseover = new Function("this.className += ' hover'"),
this.onmouseout = new Function("this.className = this.className.replace(' hover','')"),
this.style.behavior = null);
}
ну а в обычном все как и прежде
2
3
4
#navigation li.hover{
background:#f00;
}
Но все же это нестоит применять. Так как експрешн будет тормозить работу браузера, заметно будет на больших страницах