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

62 комментария

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

Комментарии (62)

Jman

15 лет 3 месяца назад

Это не мой случай :), или больше никто не пользуется классами?
У Павла как раз написано правильно.
Просто 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.replace(/ hover/g, '');} //удаляем только класс ховер, а остальные оставляем.
</script>

Jman
15 лет 3 месяца назад
во блин, а если код с подсветкой, то можно теги не скрывать было… %)
Dimox
15 лет 3 месяца назад
Jman, спасибо за эту добавку =) Мне пока такой случай не попадался.
gordi
15 лет 3 месяца назад
Jman
…или больше никто не пользуется классами?
Улучшение скрипта привествуется, но ходелось бы увидеть конкретный пример, где описанная вами ситуация имеет место быть и как ее исправляет ваше предложение.
Ссылка на пример с кратким пояснением, не помешает :)

Jman

15 лет 3 месяца назад

Уппс, в коде закралась ошибка… перепечатывал бездумно.

<attach for=element event=onmouseover handler=topm>
<attach for=element event=onmouseout handler=verm>
<script>
  function topm(){element.className += ' hover';} // добавляем ещё один класс, а не затираем  
  function verm(){element.className = element.className.replace(/ hover/g, '');} //удаляем только класс ховер, а остальные оставляем.
</script>

Jman
15 лет 3 месяца назад
gordi,
Dimox,
как хостер порешает проблемы с ftp выложу пример, почему скрипт который в топике — неправильный. Но как по мне это очевидно.
gordi
15 лет 3 месяца назад
Jman
…почему скрипт который в топике — неправильный.
Скрипт рабочий, проверен неоднократно.
Возможно вам нужен несколько иный функционал, но требовать всего и все от простейшего скрипта, еще раз подчеркну, который решает все возложенные на него обязанности, не стоит :)
Ждем конкретного примера.
Jman
15 лет 3 месяца назад
gordi, как у вас с Javascript? а с версткой? Вы пользуетесь классами? или вы тулите везде divы с id? А занете что у элемента может быть несколько классов? Что существуют селекторы типа. class01+class02 (которые пока не везде работают) Я внёс правильные изменения в скрипт, количество знаков немного увиличилось, строк осталось столько же.
element.className='hover'; - конуструкция сама по себе деструктиваная, она ведь в тупую трёт классы у элемента.
Нужен пример доказывающий очивидное?
myopinion.net.ua/examples/ie6hover/ сначала заходим нормальным браузером и читаем, потом заходим MSIE6
Jman
15 лет 3 месяца назад
Dimox, а что куки не работают? надоедеает постоянно форму заполнять :)
Dimox
15 лет 3 месяца назад
gordi, как у вас с Javascript? а с версткой? Вы пользуетесь классами? или вы тулите везде divы с id? А занете что у элемента может быть несколько классов? Что существуют селекторы типа. class01+class02
Да мы это прекрасно понимаем, просто в наших работах не встречаются примеры, когда при использовании hover-скрипта у элемента имеются какие-либо классы. Поэтому мы и говорим, что нам хватает варианта, который я привел в статье. Т. е. у нас с Сергеем, как правило, следующий HTML-код:
```
<ul id="nav">
	<li></li>
	<li></li>
	...
</ul>
```
Dimox, а что куки не работают? надоедеает постоянно форму заполнять :)
Работали. Похоже, я потер какую-то часть шаблона, которая отвечает за это. Знать бы, какую…
gordi
15 лет 3 месяца назад
Jman
…как у вас с Javascript? а с версткой?
Стоит ли так горячиться?
Решили проблему, молодец :)
Мне она в таком виде не встречалась.
Хотя, сомнения кое-какие есть, и думаю в вашем случае, можно было бы обойтись только средствами CSS.
Но это кто, как может :)
Потому, как ваш пример и в IE6 и IE7 ведет себя одиаково, только не надо мне рассказывать сказки по условные комментарии, ладно :)
Jman
15 лет 3 месяца назад
Для начала его необходимо подключить к файлу стилей, например, так (если нужно предусмотреть возможность его применения к любому html-элементу):
* {behavior:url («ie6hover.htc»)}
Вот где зло. Подключите в таком виде к любому сайту и у вас будут сыпатся в MSIE все классы.
li {behavior:url («ie6hover.htc»)} — такой способ имеет право на жизнь, при условии что у li не будет классов.
И в место того чтобы оправдыватся и гнать на меня, что я высосоал проблему из пальца
Мне пока такой случай не попадался.
Улучшение скрипта привествуется, но ходелось бы увидеть конкретный пример, где описанная вами ситуация имеет место быть и как ее исправляет ваше предложение.
Ссылка на пример с кратким пояснением, не помешает :)
Мне она в таком виде не встречалась.
Хотя, сомнения кое-какие есть, и думаю в вашем случае, можно было бы обойтись только средствами CSS.
Но это кто, как может :)
Потому, как ваш пример и в IE6 и IE7 ведет себя одиаково, только не надо мне рассказывать сказки по условные комментарии, ладно :)
Могли бы просто внести изминение в код и статью. У вас же 1900 подписчиков, из них процентов 20% будут бездумно использовать этот скрипт.
Всё-таки я немогу понять почему я должен доказывать очивидное. Давайте сделаем на оборот.
Dimox, если не трудно подключи к своему блогу этот скрипт, так как написано в статье
* {behavior:url («ie6hover.htc»)}
и посмотри что будет в IE6 и IE7.
Я себя за гуру не считаю, и рад когда мне указывают на мои ошибки. Тут же я вижу ситуацию на оборот.
Хотя, сомнения кое-какие есть, и думаю в вашем случае, можно было бы обойтись только средствами CSS.
Но это кто, как может :)
Я повторю ещё раз, это не мой случай. Я на эту статью попал из поста про итоги года, мне ховер эфект для IE не нужен. Насчёт средств CSS можете мне не расказывать.
Если уж мне сильно нужен будет: hover :active :focus то я лучше буду использывать www.xs4all.nl/~peterned/htc/csshover3-source.htc — 200 строк кода, но зато не генерит лишних классов.
Jman
15 лет 3 месяца назад
Чёт я разошолся. :)
Jman
15 лет 3 месяца назад
Надо было молча исправить, и написать решение у себя. Тогда бы мне не пришлось ни кому ни чего доказывать.
gordi
15 лет 3 месяца назад
Jman
А на счёт поведения в точку…
Ах, вот в чем причина Вашего на адекватного поведения, простите, ради бога, не знал :)
Мне не нужен ни какой функционал
Тогда в чем дело?
Говорю вам спасибо за исправление.
Надеюсь вы успокоитесь после этого? :(
Jman
15 лет 3 месяца назад
gordi,
Потому, как ваш пример и в IE6 и IE7 ведет себя одиаково, только не надо мне рассказывать сказки по условные комментарии, ладно :)
потому как ваш скрипт выполняется там, где есть подержка .htc, тоесть и в MSIE6 и MSIE7 и классы будут продать и там и там. если только не подключить его через условные коменты или хаки. То что пример себя видёт одинкаво в обоих браузерах — так и было задумано. Класс для боди я никогда не присваиваю. Пример был написан только для того чтобы показать как скрипт затирает классы.
gordi
15 лет 3 месяца назад
Jman
Повторю, не стоит так горячиться, в конце концов, что произошло?
У вас была проблема, вы ее решили, прекрасно.
Нам с Дмитрием она не встречалась, благодаря вам будем знать :)
К чему ваши высказываения в мой адрес по поводу знания или не знания чего либо:
как у вас с Javascript? а с версткой? Вы пользуетесь классами? или вы тулите везде divы с id? А занете что у элемента может быть несколько классов?
Ваши слова, и заметьте, вы первый начали высказывать претензии ко мне и автору блога, хотя пару-тройку уроков вам бы мы с Дмитрием могли бы дать, не только по html и css, но и по правилам поведения в приличном обществе, будьте сдержанее, по меньше амбиций и апломба, это поможет во многих спорны случаях, компромиссы рулят :)
Тем более делить то, нам не чего в принципе.
А просьба показать пример, что в ней особенного?
Суть вашей проблемы стала яснее и многие, кто сталкнется с ней, вам скажут за это только спасибо.
Jman
15 лет 3 месяца назад
К автору блога я претензий не высказывал :)
Jman, спасибо за эту добавку =) Мне пока такой случай не попадался.
Человек сказал спасибо, и доказывать ничего не просил.
Втягивать третьего (хоть и хозяина блога) не стоит. Говорите за себя.
Учить меня правилам поведения? Не смешите. Давайте не будем переходить на личности.
Jman
15 лет 3 месяца назад
У вас была проблема, вы ее решили, прекрасно.
И я ещё раз повторю — это не моя проблема.
gordi
15 лет 3 месяца назад
Jman
Давайте не будем переходить на личности.
Еще раз перечитайте себя, что вы писали и что вы имели ввиду говоря:
как у вас с Javascript? а с версткой?
Никто не требовал от вас доказательств ваше правоты, не будьте смешными.
Была просьба показать пример и ничего более.
И начиналась это словами:
Возможно вам нужен несколько иный функционал…
Что в этом такого обидного для вас, что вас так задело за живое?
Следите за своими словами, выражениями и все будет Ok :)

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

Смотрите также

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

Зеленый свет CSS-свойствам при верстке под IE8 и выше

Эмуляция псевдо-селектора :nth-child () в IE7 и IE8

Цифровые часы на чистом CSS и jQuery

Комментарии (62)