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

В свете предложенных дополнительных вариантов скрипта, так сказать, на все случаи жизни, в комментариях к статье “Простейший скрипт для реализации hover-эффекта для любого элемента в Internet Explorer 6“, а также развернувшихся там же баталий, я решил реинкарнировать данную статью, описав эти варианты, и показать их живые примеры.

Вариант 1

Создается файл с расширением .htc (например, ie6hover.htc), в который помещается следующий скрипт:

Это наиболее правильный и универсальный вариант. Особенность в том, что, если у элемента уже есть класс, то новый класс hover не заменяет существующий, а добавляется к нему. И аналогично с обратным действием - удаляется только класс hover, а прочие классы элемента сохраняются.

Например, у нас имеется элемент с классом: <li class=”style”></li>. В результате действия данного варианта скрипта получаем следующее:

• При наведении курсора элемент обретает такой вид: <li class=”style hover”></li>
• Когда убираем курсор, элемент возвращается к исходному варианту: <li class=”style”></li>

Как использовать скрипт

1. Если нужно предусмотреть возможность его применения к любому html-элементу, то подключаем его к файлу стилей следующим образом:

   1	* {behavior:url("ie6hover.htc")}

   Либо можно указать конкретный элемент, к которому хотим применить скрипт, например:

   1	#nav li {behavior:url("ie6hover.htc")}

2. После этого добавляем стиль для реализации ховер-эффекта. Например, для выпадающего подменю:

   1 2 3 4

   #nav li:hover ul,  /* для современных браузеров */ #nav li.hover ul { /* для Internet Explorer 6 */   display: block; }

Для наглядности смотрим на пример №1.

Вариант 2

Всего лишь одно CSS-правило для элемента, к которому хотим применить класс hover:

Это то же самое, что и первый вариант, только здесь скрипт вставлен в CSS через expression. Если ваша цель при использовании этого варианта - сохранить валидность файла стилей, тогда рекомендуется вставить вышеуказанный стиль через условные комментарии, показывая только браузеру Internet Explorer 6.

Для наглядности смотрим на пример №2.

Вариант 3

По аналогии с первым вариантом создается файл с расширением .htc (например, ie6hover.htc), в который помещается следующий скрипт:

Данный вариант рекомендуется использовать только в том случае, если вы заведомо знаете, что у элементов, к которым вы будете применять скрипт, не будет никаких классов, иначе это приведет к тому, что скрипт сотрет все имеющиеся классы элемента при наведении курсора, что в свою очередь покорежит верстку.

Например, у нас имеется элемент с классом: <li class=”style”></li>. В результате действия данного варианта скрипта, получаем следующее:

• При наведении курсора элемент обретает следующий вид: <li class=”hover”></li>
• Когда убираем курсор, элемент обретает такой вид: <li class=”"></li>

Т.е. изначально был класс style, а после обработки скриптом он удалился. Вот наглядный пример (пример №3) такого неподходящего использования скрипта.

Как использовать скрипт

Так же, как в первом варианте, но всегда помните об особенности 3-го варианта скрипта.

Таким образом, у нас есть несколько простейших вариантов реализации в IE6 hover-эффекта для любого html-элемента. Какой из вариантов использовать - решать вам, ориентироваться стоит на конкретную ситуацию. К примеру, я всегда пользуюсь 3-м вариантом, поскольку случаи, подходящие под 1-й/2-й варианты мне пока не попадались.