Как еще оживить HTML-страничку, или «Достойная замена использованию псевдоклассов :hover, :active» (шпаргалка для начинающих)
Invite pending
Добрый день всем!
Речь пойдет о достойном способе избежать (а старшие ребята подскажут, действительно ли он достоин жить) возможных глюков CSS в различных браузерах. Статья не претендует на ноу-хау, или на непреложную истину. В ней описан способ, который еще подлежит обсуждению, которого, собственно, я и жду в комментариях (Думаю, что лучше пусть это будет не расстрел тапками, а конструктивная беседа). Итак.
Стандартным решением для оживления какой-нибудь кнопки (использовано также в предыдущем моем хабратопике) является использование псевдоклассов.
Служит для задания свойств ссылки (или другого объекта), которые она (он) получает при наведении на нее (него) указателя мыши. Делается это так:
HTML:
CSS:
Чтобы заставить ссылку изменить цвет текста при наведении достаточно использовать :hover
CSS:
Все просто. Но для полноценности ссылочку (элементик) не мешало бы изменить и при нажатии. Для этого есть и следующий псевдокласс:
Псевдокласс :active определяет стиль для активной ссылки (ссылка при нажатии на нее). Описывается это следующим образом:
CSS:
Дело в том, что данные псевдоклассы, согласно спецификации, ориентированы на использование с ограниченным набором элементов, например:
:active применяется к ссылкам (источник)
:hover — вообще «не определился» с областью применения, а в стареньком ИЕ вообще работает с багами.
И что теперь делать, если хочется, чтобы на курсор реагировали не только ссылки?
Изменять свойства любого объекта HTML при наведении указателя/нажатии кнопки мыши можно с помощью следующей команды:
и так далее.
Кроме того, можно обрабатывать все множество событий: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup
Важно помнить:
1. CSS-свойства в jQuery пишутся так же, как и в CSS (color, background-color, display и т.д.)
2. Перед использованием, jQuery не мешало бы подключить:
Спасибо за внимание.
Речь пойдет о достойном способе избежать (а старшие ребята подскажут, действительно ли он достоин жить) возможных глюков CSS в различных браузерах. Статья не претендует на ноу-хау, или на непреложную истину. В ней описан способ, который еще подлежит обсуждению, которого, собственно, я и жду в комментариях (Думаю, что лучше пусть это будет не расстрел тапками, а конструктивная беседа). Итак.
Стандартным решением для оживления какой-нибудь кнопки (использовано также в предыдущем моем хабратопике) является использование псевдоклассов.
Псевдокласс :hover
Служит для задания свойств ссылки (или другого объекта), которые она (он) получает при наведении на нее (него) указателя мыши. Делается это так:
HTML:
<a class="link" href="http://somesite.ru">Sometext</a>
CSS:
.link {
color: #333333; // цвет в "покое" - темно-серый
...
}
Чтобы заставить ссылку изменить цвет текста при наведении достаточно использовать :hover
CSS:
.link:hover {
color: #0000ff; // цвет при наведении - синий
}
Все просто. Но для полноценности ссылочку (элементик) не мешало бы изменить и при нажатии. Для этого есть и следующий псевдокласс:
Псевдокласс :active
Псевдокласс :active определяет стиль для активной ссылки (ссылка при нажатии на нее). Описывается это следующим образом:
CSS:
.link.active {
color: #ff0000; // цвет при нажатии - красный
}
Возможные проблемы реализации
Дело в том, что данные псевдоклассы, согласно спецификации, ориентированы на использование с ограниченным набором элементов, например:
:active применяется к ссылкам (источник)
:hover — вообще «не определился» с областью применения, а в стареньком ИЕ вообще работает с багами.
И что теперь делать, если хочется, чтобы на курсор реагировали не только ссылки?
Использование jQuery
Изменять свойства любого объекта HTML при наведении указателя/нажатии кнопки мыши можно с помощью следующей команды:
// аналог псевдокласса :hover
$(.link).live('mouseover', function() {
$(this).css({
'color': '#0000ff', // меняем цвет
'_property_': '_value_' // ... и любое другое свойство
})
});
// аналог псевдокласса :active
$(.link).live('mousedown', function() {
$(this).css({
'color': '#0000ff', // меняем цвет
'_property_': '_value_' // ... и любое другое свойство
})
});
и так далее.
Кроме того, можно обрабатывать все множество событий: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup
Важно помнить:
1. CSS-свойства в jQuery пишутся так же, как и в CSS (color, background-color, display и т.д.)
2. Перед использованием, jQuery не мешало бы подключить:
<head>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
...
</head>
Спасибо за внимание.