Главная›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
    14 января 2009 г. в 22:40

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

  2. Dimox
    14 января 2009 г. в 23:52

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

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

  3. Son'ka
    30 января 2009 г. в 04:46

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

    1. Dimox
      30 января 2009 г. в 11:43 / ответ на коммент Son'ka

      Пожалуйста. Рад помочь.

  4. Den
    30 января 2009 г. в 19:48

    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
    )

    1. Dimox
      31 января 2009 г. в 12:40 / ответ на коммент Den

      Мне самому не ясно, для чего нужен этот скроллбар, я брал готовое решение.

  5. Механик
    3 февраля 2009 г. в 14:22

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

  6. s1ma
    25 мая 2009 г. в 22:25

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

  7. Nigrita
    18 июня 2009 г. в 13:30

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

  8. Sync
    11 августа 2009 г. в 14:45

    Интересно, ни у кого не возникало проблем с 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
    11 августа 2009 г. в 15:02

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

  10. Сачивка Игорь (Juicy)
    22 сентября 2009 г. в 16:03

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

    <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% будет работать. Да и скрипты никакие не нужны.

    1. Dimox
      22 сентября 2009 г. в 16:38 / ответ на коммент Сачивка Игорь (Juicy)

      А если нужно выпадающее меню 2-го и т.д. уровня?

      1. Сачивка Игорь (Juicy)
        22 сентября 2009 г. в 18:21 / ответ на коммент Dimox

        А какие могут возникнуть проблемы?

        1. Dimox
          22 сентября 2009 г. в 18:43 / ответ на коммент Сачивка Игорь (Juicy)

          Я не вижу, как его сделать вашим способом. Ваш код – только для 1-го уровня.

          1. Сачивка Игорь (Juicy)
            22 сентября 2009 г. в 19:42 / ответ на коммент Dimox

            Вы не правы… Пример тут…

            1. Dimox
              23 сентября 2009 г. в 09:21 / ответ на коммент Сачивка Игорь (Juicy)

              Вы противоречите самому себе: сначала пишите, что “скрипты никакие не нужны”, а потом показываете пример с использованием JS, размер которого, к тому же, гораздо больше скрипта, описанного в моей статье.

              1. Сачивка Игорь (Juicy)
                23 сентября 2009 г. в 09:28 / ответ на коммент Dimox

                Все скрипты в моём примере для раскрывания многоуровнего меню, а не для hover’a. Будьте внимательней.

  11. Дима
    21 марта 2010 г. в 03:18

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

  12. andriy
    2 июля 2010 г. в 07:47

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

  13. Алексей Павлов
    23 октября 2010 г. в 09:34

    А я делаю ещё проще, с помощью 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.

    1. Dimox
      23 октября 2010 г. в 09:49 / ответ на коммент Алексей Павлов

      Ради только лишь этой задачи использовать jQuery не разумно. Но, если на сайте реализован еще ряд функций с помощью jQuery, тогда есть резон так сделать.

      1. Алексей Павлов
        23 октября 2010 г. в 10:31 / ответ на коммент Dimox

        Согласен. Но это ещё один способ, поэтому я его привёл.
        Современные сайты часто используют JQuery для анимации (меню, панелек и т.п.), для AJAX и других задач. Я только начал использовать его, но уже убедился, что эта библиотека – супер классная.
        Жаль, что .js-файл последней версии весит довольно много – 75 КБ… Но тут можно поэкспериментировать со старыми версиями, они весят меньше – до 25 КБ.

        1. Dimox
          23 октября 2010 г. в 10:37 / ответ на коммент Алексей Павлов

          Рекомендую подключать jQuery с Гугла, потому что он отдает его сжатым. Например, версия 1.4.2 получается в размере всего 24 Кб.

    2. Enemy
      31 августа 2011 г. в 23:21 / ответ на коммент Алексей Павлов

      Зачёт, всё ок работает :)

  14. atemiks
    27 июля 2011 г. в 18:16

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

    1. Dimox
      27 июля 2011 г. в 18:42 / ответ на коммент atemiks

      Для подобных файлов везде указывается расширение .htc, поэтому, скорее всего, именно так и нужно оставлять.

      1. atemiks
        27 июля 2011 г. в 18:44 / ответ на коммент Dimox

        Ясно, спасибо
        Попробовал с этими расширениями что писал выше, не работает

Ваш комментарий

Жирный текст

Ссылка

Цитата

Внутристрочный код

CSS-код

HTML-код

JavaScript-код

PHP-код

© 2006–2024 Dimox.name. Все права защищены. Перепечатка запрещена.