JS властивість Event.mouseenter
Загальний опис
Подія mouseenter активується, коли курсор миші заходить на елемент, і вона не спрацьовує при переміщенні курсора всередині дочірніх елементів. Це робить її відмінною від події mouseover, яка реагує на кожен вхід курсора як на батьківський елемент, так і на будь-які його дочірні елементи. mouseenter зручна для випадків, коли потрібно відстежувати взаємодію тільки з конкретним елементом, а не з його внутрішньою структурою.
Ця подія часто використовується для створення інтерактивних ефектів на елементах, наприклад, для появи додаткової інформації, зміни стилю або анімації при наведенні.
Щоб працювати з mouseenter, використовується метод addEventListener. Наприклад, можна змінити фон кнопки при наведенні курсора:
const button = document.getElementById('myButton');
button.addEventListener('mouseenter', function() {
button.style.backgroundColor = 'blue';
});
На відміну від події mouseover, mouseenter не має ефекту "вспливання" (bubbling), тобто вона не поширюється до батьківських елементів. Це дозволяє точніше контролювати взаємодію з окремими елементами, зокрема, якщо на сторінці є складна вкладена структура.
Також можна використовувати властивості об'єкта події, такі як event.target, щоб дізнатися, на який елемент зайшов курсор:
element.addEventListener('mouseenter', function(event) {
console.log('Курсор увійшов на елемент:', event.target);
});
Подія mouseenter зазвичай використовується разом із mouseleave для контролю виходу курсора з елемента. Це дозволяє створювати інтерактивні ефекти, що активуються при наведенні курсора і зникають, коли курсор залишає область елемента.
| Порада: | Подію |
| Порада: | Для створення інтерактивних списків або меню |
| Порада: | Якщо обробляєте подію |
Синтаксис
element.addEventListener('mouseenter', function(event) {
// Обробка події
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
Користувач бачить три зображення, розташовані в галереї. Коли курсор миші входить на одне зображення, воно збільшується на 50% за допомогою CSS-трансформації, створюючи ефект "zoom-in". Після того, як курсор залишає зображення, воно повертається до свого початкового розміру. Такий ефект можна використовувати для інтерактивних галерей або карток продуктів на сайті.
У цьому прикладі при наведенні курсора на картку змінюється її фон. Це використовується для створення інтерактивного візуального ефекту, що підкреслює активний стан елемента. Подія mouseleave повертає початковий стан при виході курсора.
const card = document.getElementById('card');
card.addEventListener('mouseenter', function() {
card.style.backgroundColor = '#e0e0e0';
});
card.addEventListener('mouseleave', function() {
card.style.backgroundColor = 'white';
});Цей приклад демонструє, як за допомогою події mouseenter і класів CSS можна створити підсвічування пунктів меню. Коли курсор миші входить на елемент меню, до нього додається клас, який може змінювати його зовнішній вигляд (наприклад, змінювати колір фону або тексту), а при виході курсора клас видаляється.
const menuItems = document.querySelectorAll('.menu-item');
menuItems.forEach(function(item) {
item.addEventListener('mouseenter', function() {
item.classList.add('active');
});
item.addEventListener('mouseleave', function() {
item.classList.remove('active');
});
});