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

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

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

  1. Jman, обрати внимание на этот комментарий, Павел предложил решение, которое подходит для твоего случая.

  2. Это не мой случай :), или больше никто не пользуется классами?
    У Павла как раз написано правильно.
    Просто 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>
  3. во блин, а если код с подсветкой, то можно теги не скрывать было… %)

  4. Jman, спасибо за эту добавку =) Мне пока такой случай не попадался.

  5. Jman

    …или больше никто не пользуется классами?

    Улучшение скрипта привествуется, но ходелось бы увидеть конкретный пример, где описанная вами ситуация имеет место быть и как ее исправляет ваше предложение.
    Ссылка на пример с кратким пояснением, не помешает :)

  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 = element.className.replace(/ hover/g, '');} //удаляем только класс ховер, а остальные оставляем.
    </script>
    
  7. gordi,
    Dimox,
    как хостер порешает проблемы с ftp выложу пример, почему скрипт который в топике — неправильный. Но как по мне это очевидно.

  8. Jman

    …почему скрипт который в топике — неправильный.

    Скрипт рабочий, проверен неоднократно.
    Возможно вам нужен несколько иный функционал, но требовать всего и все от простейшего скрипта, еще раз подчеркну, который решает все возложенные на него обязанности, не стоит :)

    Ждем конкретного примера.

  9. gordi, как у вас с Javascript? а с версткой? Вы пользуетесь классами? или вы тулите везде divы с id? А занете что у элемента может быть несколько классов? Что существуют селекторы типа .class01+class02 (которые пока не везде работают) Я внёс правильные изменения в скрипт, количество знаков немного увиличилось, строк осталось столько же.
    element.className=’hover’; — конуструкция сама по себе деструктиваная, она ведь в тупую трёт классы у элемента.

    Нужен пример доказывающий очивидное?
    http://myopinion.net.ua/examples/ie6hover/ сначала заходим нормальным браузером и читаем, потом заходим MSIE6

  10. Dimox, а что куки не работают? надоедеает постоянно форму заполнять :)

  11. gordi, как у вас с Javascript? а с версткой? Вы пользуетесь классами? или вы тулите везде divы с id? А занете что у элемента может быть несколько классов? Что существуют селекторы типа .class01+class02

    Да мы это прекрасно понимаем, просто в наших работах не встречаются примеры, когда при использовании hover-скрипта у элемента имеются какие-либо классы. Поэтому мы и говорим, что нам хватает варианта, который я привел в статье. Т.е. у нас с Сергеем, как правило, следующий HTML-код:

    
    <ul id="nav">
    	<li></li>
    	<li></li>
    	...
    </ul>
    

    Dimox, а что куки не работают? надоедеает постоянно форму заполнять :)

    Работали. Похоже, я потер какую-то часть шаблона, которая отвечает за это. Знать бы, какую…

  12. Jman

    …как у вас с Javascript? а с версткой?

    Стоит ли так горячиться?
    Решили проблему, молодец :)
    Мне она в таком виде не встречалась.
    Хотя, сомнения кое-какие есть, и думаю в вашем случае, можно было бы обойтись только средствами CSS.
    Но это кто, как может :)
    Потому, как ваш пример и в IE6 и IE7 ведет себя одиаково, только не надо мне рассказывать сказки по условные комментарии, ладно :)

  13. Для начала его необходимо подключить к файлу стилей, например, так (если нужно предусмотреть возможность его применения к любому 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 то я лучше буду использывать http://www.xs4all.nl/~peterned/htc/csshover3-source.htc — 200 строк кода, но зато не генерит лишних классов.

  14. Чёт я разошолся. :)

  15. Надо было молча исправить, и написать решение у себя. Тогда бы мне не пришлось ни кому ни чего доказывать.

  16. Jman

    А на счёт поведения в точку…

    Ах, вот в чем причина Вашего на адекватного поведения, простите, ради бога, не знал :)

    Мне не нужен ни какой функционал

    Тогда в чем дело?

    Говорю вам спасибо за исправление.
    Надеюсь вы успокоитесь после этого? :(

  17. gordi,

    Потому, как ваш пример и в IE6 и IE7 ведет себя одиаково, только не надо мне рассказывать сказки по условные комментарии, ладно :)

    потому как ваш скрипт выполняется там, где есть подержка .htc, тоесть и в MSIE6 и MSIE7 и классы будут продать и там и там. если только не подключить его через условные коменты или хаки. То что пример себя видёт одинкаво в обоих браузерах — так и было задумано. Класс для боди я никогда не присваиваю.Пример был написан только для того чтобы показать как скрипт затирает классы.

  18. Jman

    Повторю, не стоит так горячиться, в конце концов, что произошло?
    У вас была проблема, вы ее решили, прекрасно.
    Нам с Дмитрием она не встречалась, благодаря вам будем знать :)

    К чему ваши высказываения в мой адрес по поводу знания или не знания чего либо:

    как у вас с Javascript? а с версткой? Вы пользуетесь классами? или вы тулите везде divы с id? А занете что у элемента может быть несколько классов?

    Ваши слова, и заметьте, вы первый начали высказывать претензии ко мне и автору блога, хотя пару-тройку уроков вам бы мы с Дмитрием могли бы дать, не только по html и css, но и по правилам поведения в приличном обществе, будьте сдержанее, по меньше амбиций и апломба, это поможет во многих спорны случаях, компромиссы рулят :)
    Тем более делить то, нам не чего в принципе.

    А просьба показать пример, что в ней особенного?
    Суть вашей проблемы стала яснее и многие, кто сталкнется с ней, вам скажут за это только спасибо.

  19. К автору блога я претензий не высказывал :)

    Jman, спасибо за эту добавку =) Мне пока такой случай не попадался.

    Человек сказал спасибо, и доказывать ничего не просил.
    Втягивать третьего (хоть и хозяина блога) не стоит. Говорите за себя.
    Учить меня правилам поведения? Не смешите. Давайте не будем переходить на личности.

  20. У вас была проблема, вы ее решили, прекрасно.

    И я ещё раз повторю — это не моя проблема.