CSS:hover для любого элемента
Экспериментируя с псевдо-классом :hover и анализируя его преимущества, я расстроился когда узнал о том, что Internet Explorer не поддерживает :hover естественным путем. В этом браузере данный селектор можно использовать только для элементов ссылок, то есть <a> и все. Современные же браузеры могут отображать эффект выделения для любого элемента CSS. Как же добавить эту функцию и для IE?
Существует так называемый 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 для использования :hover предназначен только для Internet Explorer. Поэтому можно воспользоваться специальными комментариями (conditional comments), которые делают документ валидным. Но в этом случае все должно находится не в CSS файле, а между
самого HTML документа:Ну вот и все. Удачи.
Источник http://www.umade.ru/log/2004/07/css-hover-any-element/
Комментарии
:hover
:hover для всех элементов css не работает только в ie 6 или во всех Инет Эксплорерах? подскажите
Не знаю как для всех но для А
Не знаю как для всех но для А и li нормально работает начиная с ИЕ7. А для ИЕ6ть с костылем.
Отправить комментарий