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-файл:

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

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

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

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