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

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

Вариант 1

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

<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>

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

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

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

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

  1. Если нужно предусмотреть возможность его применения к любому html-элементу, то подключаем его к файлу стилей следующим образом:
    * {behavior:url("ie6hover.htc")}
    

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

    #nav li {behavior:url("ie6hover.htc")}
    
  2. После этого добавляем стиль для реализации ховер-эффекта. Например, для выпадающего подменю:
    #nav li:hover ul, /* для современных браузеров */
    #nav li.hover ul { /* для Internet Explorer 6 */
     display: block;
    }
    

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

Вариант 2

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

#nav li {
	scrollbar-face-color: expression(
		runtimeStyle.scrollbarFaceColor = '#fff',
		onmouseover = function() {this.className += ' hover'},
		onmouseout = function() {this.className = this.className.replace(/ hover/g, '')}
	);
}

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

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

Вариант 3

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

<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>

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

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

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

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

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

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

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

Комментарии (29)
  1. 1

    Отлично, Дима :)
    Баталии помогли выяснить, что, как и для чего :)
    Всегда использовал вариант № 3, собственно скрипт нужен был только для меню с вложениями, ну может быть и для других случаев.
    Но там изначально не подразумевалось классов, поэтому выявленная особенность и не возникала :)
    При случае, конечно, будем применять вариант № 1 :)

  2. 2

    При случае, конечно, будем применять вариант № 1 :)

    Я аналогично =)

  3. 3
    Son'ka

    Спасибо огромное за показанные варианты!
    вот уже в который раз Ваши предложения организации кода меня выручают :]
    вариант № 1 это самое оно, спасибо :]

  4. 5
    Den

    scrollbar-face-color: expression(
    runtimeStyle.scrollbarFaceColor = ‘#fff’,

    Можно не трогать несчастный скроллбар, а удалять отработавший экспрешн так:

    behavior: expression(
    onmouseover = function() {this.className += ‘ hover’},
    onmouseout = function() {this.className = this.className.replace(/ hover/g, »)},
    style.behavior = null
    )

  5. 7
    Механик

    Интересно, ни у кого не возникало проблем с margin при использовании 1-го метода. У меня при наведении на элемент, он сдвигается влево, если задать ему margin.

  6. 8
    s1ma

    Спасибо, большое, очень помогла статья.

  7. 9
    Nigrita

    О, большое спасибо. Статья помогла.

  8. 10
    Sync

    Интересно, ни у кого не возникало проблем с margin при использовании 1-го метода. У меня при наведении на элемент, он сдвигается влево, если задать ему margin.

    Используй код который написал Den

    #navigation li{
    behavior: expression(
    onmouseover = function() {this.className += ‘ hover’},
    onmouseout = function() {this.className = this.className.replace(/ hover/g, ”)},
    style.behavior = null
    )
    }

    и все будет ок, ток как по мне для ясности лучше этот код вынести в файл ie6.css

  9. 11
    Sync

    имхо третий вариант лучше никогда неиспользовать, так как по размеру он выигрывает незначительно(в сравненни с первыми двумя), но по универсальности проигрывает на все 100%, и еще неизвестно кто и как в будующем будет переделывать ваш код, поэтому необходимо делать верстку максимально универсальной и если есть возможность избежать возможный баг в будующем, то почему бы не сделать это, особенно если это очень незначительно отобразится на размере кода

  10. 12
    Сачивка Игорь (Juicy)

    А я давно делаю так (надеюсь кому-то поможет):


    <a class="hover" href="#">NTRCN</a>
    <ul>
    <li><a class="hover" href="#">Пункт меню 1</a></li>
    <li><a class="hover" href="#">Пункт меню 2</a></li>
    <li><a class="hover" href="#">Пункт меню 3</a></li>
    </ul>

    a:hover { background: red; display: block; cursor: default; }
    a.hover { color: #000; text-decoration: none; }
    ul { width: 200px; }
    ul li { }
    ul li a { display: block; }
    ul li a:hover { background: red; }
    

    Не совсем логично, но зато есть уверенность что 100% будет работать. Да и скрипты никакие не нужны.

  11. 20
    Дима

    все перепробовал и не только это все помогает, кто-то сможет подсказать?
    http://rudana.biz/rekviziti.htm ту в таблице прописаны стили к ячейкам, но результат = 0

  12. 21
    andriy

    Спасибо …пол дня искал, помогло.

  13. 22
    Алексей Павлов

    А я делаю ещё проще, с помощью JQuery.

    1. Создаём стили в CSS:

    UL.mymenu li:hover, UL.mymenu li.hover {background: #747474;}
    

    2. Пишем код только для IE:

    <!--[if IE]>
    	$(document).ready(function(){
    	 $('UL.mymenu li').hover(
    	 function() { $(this).addClass("hover"); },
    	 function() { $(this).removeClass("hover"); }
    	 );
    	});
    <![endif]-->

    И всё, остальное делает JQuery.

  14. 27
    atemiks

    Добрый день.
    Обязательно ли файл заключать в расширение .htc ? или можно в другое расширение заключить например в .txt или .js ?