WebМЕГАПОСТыМоё

Достойная альтернатива псевдоклассам :hover, :active — Оживляем html-страничку

Оригинал статьи, ждущей инвайта на Хабр лежит тут в песочнице

Добрый день всем!

Речь пойдет о достойном способе избежать (а старшие ребята подскажут, действительно ли он достоин жить) возможных глюков CSS в различных браузерах. Статья не претендует на ноу-хау, или на непреложную истину. В ней описан способ, который еще подлежит обсуждению, которого, собственно, я и жду в комментариях (Думаю, что лучше пусть это будет не расстрел тапками, а конструктивная беседа). Итак.

Стандартным решением для оживления какой-нибудь кнопки (использовано также в предыдущем моем топике) является использование псевдоклассов.

Псевдокласс :hover

Служит для задания свойств ссылки (или другого объекта), которые она (он) получает при наведении на нее (него) указателя мыши. Делается это так:

HTML:

CSS:

Чтобы заставить ссылку изменить цвет текста при наведении достаточно использовать :hover

CSS:

Все просто. Но для полноценности ссылочку (элементик) не мешало бы изменить и при нажатии. Для этого есть и следующий псевдокласс:

Псевдокласс :active

Псевдокласс :active определяет стиль для активной ссылки (ссылка при нажатии на нее). Описывается это следующим образом:

CSS:

 

Возможные проблемы реализации

Дело в том, что данные псевдоклассы, согласно спецификации, ориентированы на использование с ограниченным набором элементов, например:

:active — применяется к ссылкам (источник)
:hover — вообще «не определился» с областью применения, а в стареньком ИЕ вообще работает с багами.

И что теперь делать, если хочется, чтобы на курсор реагировали не только ссылки?

Использование jQuery

Изменять свойства любого объекта HTML при наведении указателя/нажатии кнопки мыши можно с помощью следующей команды:

и так далее.

Кроме того, можно обрабатывать все множество событий: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup

Важно помнить:

1. CSS-свойства в jQuery пишутся так же, как и в CSS (color, background-color, display и т.д.)
2. Перед использованием, jQuery не мешало бы подключить:

Спасибо за внимание.

Добавить комментарий