На этом шаге мы рассмотрим использование метода .hover().
Чтобы показать, что некоторый элемент, который обычно не реагирует на щелчок мышью, предусматривает реакцию на это событие, необходимо создать интерфейс, который сам подсказывал бы, что кнопки, в действительности простые элементы <div>, являются действующими частями страницы, ожидающими действий пользователя. Для этого следует определить такое состояние кнопок, которое наглядно демонстрировало бы, что они способны некоторым образом взаимодействовать с мышью:
#switcher .hover {
cursor: pointer;
background-color: #afa;
}
Спецификация CSS включает псевдокласс с именем :hover, который позволяет определять стиль элемента, когда над ним находится курсор мыши. В Internet Explorer 6 такая возможность применима только к ссылкам, поэтому мы не можем ее использовать в случае требования обеспечения совместимости со всеми типами браузеров. Однако библиотека jQuery позволяет использовать JavaScript для изменения оформления элементов и, более того, для выполнения любых произвольных действий как в случае перемещения указателя мыши в пределы элемента, так и в случае выхода указателя за его пределы.
Метод .hover() принимает в виде аргументов две функции, как и метод .toggle() в примере предыдущего шага. В данном случае первая функция будет вызываться при перемещении указателя мыши в пределы выбранного элемента, а вторая - при покидании указателем мыши пределов этого элемента. Для достижения требуемого эффекта мы можем в эти моменты изменять классы, применяемые к кнопкам:
$(document).ready(function() {
$('#switcher .button').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
});
Рис.1. После наведения указателя мыши на кнопку можно наблюдать применение класса
Текст этого примера можно взять здесь.Мы снова использовали механизм неявной итерации и контекст события, чтобы сократить и упростить реализацию. Теперь при наведении указателя мыши на кнопку можно наблюдать применение класса.
Использование метода .hover() позволяет также избежать проблем, связанных с распространением событий в JavaScript. Чтобы понять, о чем идет речь, необходимо рассмотреть, как JavaScript определяет, какие элементы должны обрабатывать заданное событие.
На следующем шаге мы рассмотрим распространение события.
