Главная › CSS-верстка

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

29 комментариев

В свете предложенных дополнительных вариантов скрипта, так сказать, на все случаи жизни, в комментариях к статье «Простейший скрипт для реализации 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-й варианты мне пока не попадались.

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

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

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

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

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

26 комментариев

Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную плату, а для своих проектов забуду вообще. ...

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

13 комментариев

Неоднократно при верстке сайтов мне приходилось сталкиваться с ситуацией, когда строки в таблице или пункты вертикального списка необходимо было оформить зеброй. Т. е. одна строка, к примеру, с белым фоном, вторая с серым, третья опять ...

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

41 комментарий

Глядя на днях на циферки на счетчике ли.ру, в моей голове неожиданно зародилась весьма дурная идея — мне захотелось создать цифровые часы, которые бы в точности повторяли те самые циферки с того самого счетчика. Эта идея никак не давала мне покоя, ...

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

  1. gordi
    15 лет 2 месяца назад

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

  2. Dimox
    15 лет 2 месяца назад

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

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

  3. Son'ka
    15 лет 2 месяца назад

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

  4. Den
    15 лет 2 месяца назад

    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. Механик
    15 лет 2 месяца назад

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

  6. s1ma
    14 лет 10 месяцев назад

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

  7. Nigrita
    14 лет 9 месяцев назад

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

  8. Sync
    14 лет 7 месяцев назад

    Интересно, ни у кого не возникало проблем с 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. Sync
    14 лет 7 месяцев назад

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

  10. Сачивка Игорь (Juicy)
    14 лет 6 месяцев назад

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

    <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. Дима
    14 лет назад

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

  12. andriy
    13 лет 9 месяцев назад

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

  13. Алексей Павлов
    13 лет 5 месяцев назад

    А я делаю ещё проще, с помощью 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. atemiks
    12 лет 8 месяцев назад

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