umade.ru

CSS: hover для любого элемента

Экспериментируя с псевдо-классом :hover и анализируя его преимущества, я рассердился когда узнал о том, что Internet Explorer не поддерживает :hover естественным путем. В этом браузере данный селектор можно использовать только для элементов ссылок (<a href="">ссылка</a>). Современные же браузеры могут отображать эффект выделения для любого элемента CSS. Как же добавить hover для Internet Explorer?

Существует так называемый whatever:hover — способ, который позволяет веб-разработчикам использовать селектор :hover в Internet Explorer. Версия 1.11.040203 (последняя на сегодняшний день) имеет несколько незначительных недостатков, но люди, которые разобрались с этим методом, не жалуются.

Просмотрите вышеприведенную ссылку через любой браузер и поиграйте курсором мыши, наводя его на заголовки, параграфы и списки. Теперь понимаете в чём сила? Дополнительная, второстепенная информация может появляться только по желанию пользователя. Текст при этом можно оставлять просто чёрным текстом. Это разгружает глаза и делает страницу более читабельной. А уже наводя курсор на параграф можно увидеть даты, ссылки данного блока, какие-либо выделения и так далее. В какой-то степени это поддерживает идеологию больших текстов, когда удобно просматривать все использующиеся ссылки в самом конце текста.

Как же заставить Internet Explorer распознавать селектор :hover с любым элементом каскадных таблиц стилей?

Всё достаточно просто. Скачайте .htc файл (whatever:hover) и прикрепите его следующим способом через CSS-файл:

BODY {
behavior:url("csshover.htc");
}

Это предполагает, что файл csshover.htc находится в одной директории вместе с CSS-файлом. Иначе необходимо прописать правильный путь. В принципе всё. Экспериментируйте.

Примечание: во время проверки правильности написания кода, W3C CSS-валидатор выдает ошибку, так как используется behavior, что противоречит правилам. Для тех кому важно, чтобы их код соответствовал веб-стандартам, есть обход данной проблемы.

Так как файл .htc предназначен только для Internet Explorer, то можно воспользоваться специальными комментариями (conditional comments), которые делают документ валидным. Но в этом случае всё должно находится не в CSS-файле, а между тэгами <head></head> самого HTML документа:

<!--[if IE]>
<style type="text/css">
BODY { behavior:url("structure/csshover.htc"); }
</style>
<![endif]-->

Ну вот и всё. Удачи.

Всего оставлено 22 комментария

  1. Yukki Pospel 2 июля 2004

    Если мне память не изменяет, у Зелдмана на alistapart.com была статья по-этому поводу и улучшенный метод.

  2. Никита 6 июля 2004

    Память изменяет. Все говорят о методе whatever:hover как о самом достойном и функциональном.

  3. Сергей 12 сентября 2006

    Все подключил, а на IE всеравно ничего не работает… У меня hover используется для тегов div, надо ли добовлять чего-нибудь в мой css код?

  4. Theo 12 сентября 2006

    Сергей, зайди на
    http://www.xs4all.nl/~peterned/csshover.html
    и почитай. Скачай новую версию. У меня заработало сразу для li:hover-элементов.

  5. Neoline 18 октября 2006

    Подключил, все работает !!!
    Ура, наконец-то можно наполную заюзать CSS

  6. tobto 19 января 2007

    спасибо за инфо! долго искал решение и нашел. скачал, поставил – работает. css forever!

  7. Максим 25 января 2007

    работает с большими тормозами!

  8. int13h 13 апреля 2007

    >> работает с большими тормозами!
    на смартфоне тестил? ;)

  9. TyShkan 30 апреля 2007

    И вправду ужасно тормозит, когда текста много на странице ~107Кб напичканного тегами. Все ховеры начинают тормозить жутко. IE начинает хавать 20-30% ресурсов (Athlon 42 X2 4200+, 1024Mb).

    Есть какое-нибудь удобоваримое решение как этого избежать?

  10. Андрей 9 мая 2007

    Есть. Избегать использования htc.

  11. Дима 15 июля 2007

    Скажите как использовать a:hover {background-color: #c20000; text-decoration:none; color: #fff;} КУДА ВСТАВИТЬ этот код можно в html, чтобы селектор работал.. при на ведении мыши на ссылку она подсвечивалась?

  12. Lis 23 августа 2007

    > а я такою юзаю. тормозов нет
    И работает такое чудо только в IE

  13. Antoha 26 сентября 2007

    Метод хороший, но не решает всех проблем.
    Так, например, на больших и сложных документах сам IE даже для стандартного a:hover отжирает 100% (!) проца.

    Да и вообще, довольно плохо IE работает с динамическим изменением класса.

    Например, опять же, на больших документах css-конструкция:

    a:hover {
    text-decoration: underline;
    }
    работает гораздо медленее (в разы!), плюс грузит проц на 100%, чем

    &lt;a onmouseover="this.style.textDecoration='underline';" onmouseout="this.style.textDecoration='none';" rel="nofollow"&gt;...

    В Mozilla всё работает без проблем. Остаётся только повеситься. :(

  14. GrihSa 21 ноября 2007

    Для тех, у кого этот метод не заработал:
    указывайте полный URL к файлу csshover.htc, начиная со слеша “/”

    Например,
    BODY {
    behavior:url(“/csshover.htc”);
    }
    После этого у меня hover сразу без вопросов заработал

  15. Streamer 9 января 2008

    Метода работает, IE, зараза, подвисает правда, но хоть как-то. IE вообще во многом тормозит и лагает. Убить его мало.

  16. Артур 27 февраля 2008

    пасип, полезная инфа, долго искал!

  17. Матов Артемей 29 февраля 2008

    Не плохо, спасибо. Жаль, что на больших страницах тормозит.

  18. SiriusLamp 30 апреля 2008

    Лечение IE6, без всякого .htc!!!! В стилях нужно написать следующее

    a :hover{ <br />
    text-indent: 0; /*DO NOT REMOVE THIS OTHERWISE HOVER WILL NOT WORK IN IE6!*/<br />
    }

    И уже потом ставить что-то типа

    a :hover span{ <br />
    display: block;<br />
    }

    Говорят можно поставить и любое другое свойство но вот это точно работает и не мешает – проверено!

  19. ПаЛыЧ 21 июня 2008

    Хороший способ, но не хочется подгружать скрипты на сайте, посещаемость очень большая.
    Пробовал так
    div.dinav:hover > h2.tsnav, div.dinav:hover h2.tsnav {
    background:#51856B;
    color: #FFFFFF;
    }
    Работает только в опере 9.5 и сафари

  20. AntonAntonov 16 сентября 2008

    Чё то не получается (((
    Вот так делаю:

    body {background-color:#353535;
    behavior:url(“csshover.htc”);}
    .pict img:hover {border:1px solid orange;}

    И, конечно, файл csshover.htc в той же директории, что и файл стилей.

  21. Steven 31 октября 2008

    Вставляй не в CSS, а в страничку мужду Хедами (HEAD)
    У меня все четко работает!

    Спасибо.

  22. M4D_5H4D0W 29 ноября 2008

    Надеюсь, народу пригодится.

    function ieHover(tag, cl)
    {
      if (document.all)
      {
         var d = document.getElementsByTagName(tag);
         for (i = 0; i < d.length; i++)
        {
        if (d[i].className == cl)
           {
          d[i].onmouseover = function(){this.className = cl + '_ie';}
          d[i].onmouseout = function() {this.className = cl;}
          }
        }
      }
    }

Поиск по сайту

Из последнего

Архив статей и записей