Вверх

Блог
RSS лента

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

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

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

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

Как же заставить Internet Explorer распознавать селектор :hover с любым элементом каскадных таблиц стилей?
Все достаточно просто. Скачайте .htc файл (whatever:hover) и прикрепите его следующим методом через CSS файл:

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

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

Примечание: во время проверки правильности написания кода, W3C CSS валидатор выдает ошибку, так как используется behavior, что противоречит правилам. Для тех кому важно, чтобы их код соответствовал веб-стандартам, есть обход данной проблемы. Обсуждаемый файл .htc для использования :hover предназначен только для Internet Explorer. Поэтому можно воспользоваться специальными комментариями (conditional comments), которые делают документ валидным. Но в этом случае все должно находится не в CSS файле, а между самого HTML документа:

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

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

Источник http://www.umade.ru/log/2004/07/css-hover-any-element/

Ваша оценка: Пусто Средняя: 4.8 (4 голосов)

Комментарии

:hover

:hover для всех элементов css не работает только в ie 6 или во всех Инет Эксплорерах? подскажите

Не знаю как для всех но для А

Не знаю как для всех но для А и li нормально работает начиная с ИЕ7. А для ИЕ6ть с костылем.

Отправить комментарий

 
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>. Beside the tag style "<foo>" it is also possible to use "[foo]".
  • Image links with 'rel="lightbox"' in the <a> tag will appear in a Lightbox when clicked on.
  • Image links from G2 are formatted for use with Lightbox2
  • Image links with 'rel="lightshow"' in the <a> tag will appear in a Lightbox slideshow when clicked on.
  • Links to HTML content with 'rel="lightframe"' in the <a> tag will appear in a Lightbox when clicked on.
  • Links to video content with 'rel="lightvideo"' in the <a> tag will appear in a Lightbox when clicked on.
  • Links to inline or modal content with 'rel="lightmodal"' in the <a> tag will appear in a Lightbox when clicked on.

Подробнее о форматировании

CAPTCHA
Если вы человек, то тогда введите символы изображенные на картинке ниже
Image CAPTCHA
Введите символы, изображенные на картинке.
Главная | Портфолио | Услуги | Контакты | Блог