Простейший скрипт для реализации 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 – это то, что прописано в самом скрипте. По желанию, название этого класса можно заменить.
Как видите, все максимально просто.
Смотрите также
Скрипт: hover-эффект для любого элемента в Internet Explorer 6
В свете предложенных дополнительных вариантов скрипта, так сказать, на все случаи жизни, в комментариях к статье “Простейший скрипт для реализации hover-эффекта для любого элемента в Internet Explorer 6“, а также ...
Зеленый свет CSS-свойствам при верстке под IE8 и выше
Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную ...
Эмуляция псевдо-селектора :nth-child() в IE7 и IE8
Неоднократно при верстке сайтов мне приходилось сталкиваться с ситуацией, когда строки в таблице или пункты вертикального списка необходимо было оформить зеброй. Т.е. одна строка, к примеру, с белым фоном, вторая ...
Цифровые часы на чистом CSS и jQuery
Глядя на днях на циферки на счетчике ли.ру, в моей голове неожиданно зародилась весьма дурная идея – мне захотелось создать цифровые часы, которые бы в точности повторяли те самые циферки ...
Комментарии (62)
Jman
Ах, вот в чем причина Вашего на адекватного поведения, простите, ради бога, не знал :)
Тогда в чем дело?
Говорю вам спасибо за исправление.
Надеюсь вы успокоитесь после этого? :(
да, меня зацепило то что “мне нужен какой-то функционал”.
Надеюсь наш спор исчерпан?
Если кого-то не устраивает моя манера общения, то я извиняюсь. gordi ;)
Как раз на оборот, не причина а следствие.
Но опять таки, я ни кому не грубил, и не оскорблял. Я всего лишь высказал сомнение в вашей компетенции.
gordi
Устал вас цитировать.
Читайте внимательно не только себя любимого, ok :)
То, что очевидно для меня или для вас, совсем не очевидно для большинства, примеры подтверждающие очевидное и невероятное, никогда не повредят, согласны?
Закончим на мирной ноте, все уже сказанно :)
В моём понимании выражаться — ругаться матом .
Я шизофренией не страдаю.
предлагаю перейти на ты, и пожать друг-другу руки.
Хватит наверное уже нам флудить. Если вдруг захочется продолжить… icq 986785
Jman
А какие на то у вас были основания?
Может быть вы не доверяете автору блога, который в своей публикации дал прямую ссылку на меня?
Причем в в одном из своих первых комментариев, я сказал, что не являюсь атором скрипта, просто использую его, как есть и все.
Не хочу строить никаких догадок в отнешении вас, но еще раз перечитаейте комментарии и не только свои и многое поймете, если конечно сможете.
С такой манерой общения лучше сами с собой перед зеркалом практикуйте :)
А Вы умеете говорить за себя. Может Вам хватит прикрываться автором блога.
То что он поставил на Вас прямую ссылку, для меня ровным счётом ничего не значит.
Вы для меня не несёте никакого авторитета. Так что Ваши заявления о том что Вы будете меня учить поведению css и html — пустые слова.
Указывать на мою манеру поведения а тем более как мне практиковаться, вам никто права не давал. Не нравится не общайтесь.
Вы слишком высокого о себе мнения и как личность и как профессионал.
Свои догадки можете оставить при себе. Я сказал своё последнее слово. И считаю что дальнейший разговор — бессмысленный. Флудите дальше.
Jman
Ну на конец-то :)
Маленький ребенок обиделся и пошел плакать :)
Стало легче дышать:)
Jman,
Я бы сам никогда не стал пользоваться конструкцией, которая захватывает сразу все теги. Я бы даже запись вида
li {behavior:url("ie6hover.htc")}сделал еще более уточняющей, т.е. вот так:А в статье я просто примеры привел. Но теперь понимаю, что обязательно нужны уточнения на счет затирания стилей. В общем, внесу в статью необходимые правки, народ же не знает =)
Еще раз спасибо за дополнение!
P.S. Ничего себе баталии развели, на моем блоге такое впервые =) Зря вы так поцапались…
Тролли :).
Кстати в статье можно описать все три решения.
1 Решение для определенного селектора.
2 Решение Павла через експрешн.
3 Решение для всего документа. (автор не я, это всего лишь симбиоз из первого и второго).
С наступающим :)
Jman, да, пожалуй, так и сделаю. А, возможно, опубликую это в виде новой статьи.
Слава богу, пошел конструктив :)
Что всегда привествуется.
Не забываеи и про примеры :)
А просьбу показать оные, не воспринемаем в штыки, ведь они (примеры), только помогают прояснить те или иные моменты, что в целом приносит пользу всем тем, кто желает совершенствоваться в профессии, и тем для кого это просто хобби :)
Dimox, Ну тогда ждём новую статью, с удовольствием сделаю кросспост
Сергей, хорошо, и живые примеры для сравнения всех вариантов “нарисую” =)
Dimox, Ok
Сам, когда начинал, долго ломал голову, что там имел ввиду тот или иной “гений”, ему-то и одного слова было достаточно, чтобы описать проблему и ее решение :)
А нам смертным думать и думать :)
Поэтому вспоминая прошлое, для своих читателей, всегда только с примерами, как говориться бери и пользуйся, все проверенно мин нет :)
Настраивай, как надо, но вот этого делать ни в коем случае нельзя :)
Ну ты понимаешь :)
Дам-с, как приходит время заниматься IE6, так и хочется переосмыслить все жизненные ценности. Проще всего, наверное, вывести сообщение, мол, обновитесь, и не морочить себе голову :)
Ребят, отметьте в статье, что не стоит цеплять htc’цешку на селектор *. Попробуйте взять очень большую страничку с плотной верстокой(сохраните на винт, например, страницу хабра с большим количестов комментов) и добавьте в стили: “* { behavior:url(“какой нибудь.htc”); }”
Посмотрите что станет с ишаком. На каждый встреченный html-элемент (даже
будет запрашиваться и выполняться скрипт.
Такие вещи (behavior и любые expression) всегда применяются точечно — если они нужены где-то, то надо создать класс и только на него и вешать.
Удачи.
Вот за это – огромное спасибо!
Мда, прочитал все коментарии поста и был очень удивлен тому что 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;
}
Но все же это нестоит применять. Так как експрешн будет тормозить работу браузера, заметно будет на больших страницах