hover любых элементов

Whatever:hover
Самые современные браузеры поддерживают :hover селектор для любого элемента html. Это клево, потому что это позволяет Вам применить эффект mouseover к строкам таблицы используя только CSS. IE откровенно лажает с :hover, в лучшем случае если стоит 7 версия, но в большенстве случаев стоит 6.
Whatever:hover – маленький скрипт, который автоматически исправляет :hover :active и :focus для IE6, IE7 и причуд IE8. Версия 3 вводит поддержку ajax, это значит, что любой html, который вставлен в документ через javascript, также имеет вызовы :hover :active и  стили :focus в IE.

Посмотрим как это работает.
Связь whatever:hover с элементом тела, и Вы все установлены. Отметьте, что URL поведения относительно файла html, не к файлу CSS как фоновое изображение, которым был бы URL.
Link whatever:hover to the body element, and you’re all set. Note that behavior URLs are relative to the html file, not to the CSS file like a background image URL would be.

Определение поведения для IE. Как это работает?
Все браузеры могут работать с правилами CSS, используя javascript, и динамически вставлять новые правила. Обычно, IE возвращает “unknown” для чего-нибудь, что он не поддерживает, например; “p:first-child div” изменился бы на “div p:unknown”, и “p [href]” будет возвращен как “unknown”. К счастью IE распознает :hover как управляющую конструкцию, и оставляет её в покое.
IE также поддерживает так называемые поведения; есть две встроенные функции поведения, динамическая подгрузка и постоянное хранение данных. Также можно использовать .htc или .hta файл для расширения. Все это связанно с узлами html через css.
Собственно ничто не мешает нам создать конструкцию, которая обманывала бы IE, для того чтобы найти не поддерживаемые правила, и ассоциировать стили другим способом. Примерный алгоритм:

  • поиск всех стилей для :hover которые IE не поддерживает;
  • вставка новых правил которые IE действительно поддерживает;
  • установка событий сценария для того, чтобы переключить имена классов.

Таким образом :hover :active и :focus сможет поддерживаться, и как разработчик, Вам не надо ничего делать, кроме ассоциации файла сценария. Все остальное на автомате скрипт делает сам.
В отличие от версий 1 и 2, версия 3 также поддерживает динамически добавленный html (Аякс). Различие – то, что 1 версия и 2-ая работал при событии onload (тоесть только 1 раз при загрузке), тогда как 3-я версия использует expression, чтобы позволить элементам делать вызов самостоятельно. Читайте прокомментированную версию для получения информации относительно этого.
Для примера меню An:hover
Обычное использование :hover создает menusystems, используя списки. Двойной уровень menusystem слишком прост для создания. Например, если Вы удалили бы javascript из suckerfish dropdown, описанный в этой статье  и добавили бы этот скрипт к телу, он бы продолжал работать правильно.
Множественные меню требуют различного подхода. Это происходит из-за того, что IE косячит при работе с детьми элементов:

Есть альтернативный способ моделировать это, используя  только простые порожденные селекторы. Ранее описанный метод был основан на использования дополнительного пространства classnames, но более простой способ состоит в том, чтобы использовать спецификации CSS. У каждого правила CSS есть определенный вес, который может быть определён просто считая различные элементы правила. Nodenames весит “1”, класс, псевдо-класс и селекторы атрибута весят “10”, и id весят “100”. Возьмем например следующее:

Первое правило содержит только 2 элемента, которые весят 2. Второе также содержит 2 элемента, но :hover – псевдо класс весит 10, таким образом объединенное значение правила 12. Поскольку 12 превышает 2, li покажет нам влеженный ul.
Как же это нам поможет? Итак, если правило весом в 12 показывает всё подменю, все, что мы должны были бы сделать, создать правило, которое весит больше 12, чтобы скрыть следующие меню. Следующее подменю должно весить еще больше и т.д. Для 3 уровней код CSS удивительно короток:

Этот способ может использоваться для неограниченного числа вложений без дополнительных классов.
Оптимизация событий сценария
Есть ще один способ. .htc файл ищет в CSS :hover правила, и прикрепляет mouseover и mouseout к элементам. После чего :hover убирается из селектора.

… заменен на:

Это правило будет действовать ко всем <li> элементам в меню, прикрепляя события к элементам, для которых это не обязательно. Легче сделать используя имя класса. Например для подменю использовалось бы:

… это более эффективно, т.к. выбираются только те элементы, которые фактически нуждаются в событиях. Плохо лишь то, что необходимо создавать классы для указания стилей меню и Вам бы пришлось так или иначе с этим возиться.
csshover3.htc – сжатая версия (2.5Kb)
csshover3-source.htc – версия с комментариями (9Kb)
Оригинал статьи: Xs4all.nl

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.