JavaScript для верстальщика. Урок 10. Всплывающие подсказки
Рассмотрим как в js выглядит событие hover, возникающее при наведении курсора на какой-то элемент.
Чтобы при наведении курсора на какой-то элемент появлялась всплывающая подсказка с текстом, блок с этой подсказкой должен присутствовать в вёрстке, скрытый при помощи css-свойства display:none;.
Вообще говоря, изменение свойств при наведении - стандартная возможность css. Пишем
.class:hover { ... }
и можем менять свойства как нам угодно.
Но иногда возникает ситуация, когда курсор навели на один элемент, а свойства должны измениться у другого.
Как это реализовать.
Всплывающий блок с подсказкой имеет класс js-popup и уникальный id="popup-1". У ссылки, при наведении на которую должен появляться этот попап, указываем свойство href="#popup-1" и класс js-popup-hover
Событие наведение:
$(".js-popup-hover").hover(function(){
})
Создаём две переменные.
Первая
var $this = $(this);
Это просто хорошая практика, чтобы не предлагать каждый раз dom-дереву искать элемент, на который навели курсор. Она немного ускоряет работу. И, кстати, уже была использована в предыдущем уроке. $this - просто имя переменой, которое похоже на ту конструкцию, которую она сохраняет.
Вторая переменная
var popupId = $this.attr("href");
В ней сохранили id попапа, который нам нужно отобразить. Это возможно благодаря тому что id попапа и атрибут href ссылки совпадают.
$(popupId).fadeIn();
При наведении попап появляется (хорошо), но не исчезает, когда курсор отводим в сторону (плохо)
Как организовать исчезновение подсказки, когда курсор убрали?
Для этого пользуемся следующей особенностью: в конструкции
$(".js-popup-hover").hover(function(){
}, function(){
} )
Первая функция описывает событие при наведении, вторая при отсутствии наведения.
Скрыть попапы с классом .js-popup позволит функция
$(".js-popup").fadeOut();
$(".js-popup-hover").hover(function() {
var $this = $(this),
popupId = $this.attr("href");
$(popupId).fadeIn();
}, function() {
$(".js-popup").fadeOut();
});
Чтобы при наведении курсора на какой-то элемент появлялась всплывающая подсказка с текстом, блок с этой подсказкой должен присутствовать в вёрстке, скрытый при помощи css-свойства display:none;.
Вообще говоря, изменение свойств при наведении - стандартная возможность css. Пишем
.class:hover { ... }
и можем менять свойства как нам угодно.
Но иногда возникает ситуация, когда курсор навели на один элемент, а свойства должны измениться у другого.
Как это реализовать.
Всплывающий блок с подсказкой имеет класс js-popup и уникальный id="popup-1". У ссылки, при наведении на которую должен появляться этот попап, указываем свойство href="#popup-1" и класс js-popup-hover
Событие наведение:
$(".js-popup-hover").hover(function(){
})
Создаём две переменные.
Первая
var $this = $(this);
Это просто хорошая практика, чтобы не предлагать каждый раз dom-дереву искать элемент, на который навели курсор. Она немного ускоряет работу. И, кстати, уже была использована в предыдущем уроке. $this - просто имя переменой, которое похоже на ту конструкцию, которую она сохраняет.
Вторая переменная
var popupId = $this.attr("href");
В ней сохранили id попапа, который нам нужно отобразить. Это возможно благодаря тому что id попапа и атрибут href ссылки совпадают.
$(popupId).fadeIn();
При наведении попап появляется (хорошо), но не исчезает, когда курсор отводим в сторону (плохо)
Как организовать исчезновение подсказки, когда курсор убрали?
Для этого пользуемся следующей особенностью: в конструкции
$(".js-popup-hover").hover(function(){
}, function(){
} )
Первая функция описывает событие при наведении, вторая при отсутствии наведения.
Скрыть попапы с классом .js-popup позволит функция
$(".js-popup").fadeOut();
Код полностью
$(".js-popup-hover").hover(function() {
var $this = $(this),
popupId = $this.attr("href");
$(popupId).fadeIn();
}, function() {
$(".js-popup").fadeOut();
});