Подія mouseenter в JavaScript — курсор увійшов у блок
Загальний опис
Подія 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 для контролю виходу курсора з елемента. Це дозволяє створювати інтерактивні ефекти, що активуються при наведенні курсора і зникають, коли курсор залишає область елемента.
- Порада
-
Подію
автор: Bondmouseenterможна комбінувати з анімаціями CSS для створення плавних ефектів при наведенні. Наприклад, зміна кольору, масштабу або інших властивостей елемента може зробити ваш інтерфейс більш динамічним і чуйним на дії користувача. - Порада
-
Для створення інтерактивних списків або меню
автор: Bondmouseenterзручний, оскільки він забезпечує стабільну роботу в складних структурах без надмірних подій від дочірніх елементів, що може бути корисно при наведенні на багаторівневі меню. - Порада
-
Якщо обробляєте подію
автор: Bondmouseenterна великих об'єктах або компонентах, переконайтеся, що подія дійсно необхідна, щоб уникнути навантаження на продуктивність. Наприклад, якщо ви додаєте ефект тіні або складну анімацію, обмежте це на легших елементах, щоб сторінка не уповільнювалася.
Синтаксис
element.addEventListener('mouseenter', function(event) {
// Обробка події
});Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 30 | 10 | 7 | 17 | 12 | 5.5 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 30 | 10 | 7 |
Приклади
+ запропонувати свій приклад у пісочниці
У цьому прикладі при наведенні курсора на картку змінюється її фон. Це використовується для створення інтерактивного візуального ефекту, що підкреслює активний стан елемента. Подія mouseleave повертає початковий стан при виході курсора.
HTML
<div id="card">Демонстраційний елемент</div>JS
const card = document.getElementById('card');
card.addEventListener('mouseenter', function() {
card.style.backgroundColor = '#e0e0e0';
});
card.addEventListener('mouseleave', function() {
card.style.backgroundColor = 'white';
});Цей приклад демонструє, як за допомогою події mouseenter і класів CSS можна створити підсвічування пунктів меню. Коли курсор миші входить на елемент меню, до нього додається клас, який може змінювати його зовнішній вигляд (наприклад, змінювати колір фону або тексту), а при виході курсора клас видаляється.
HTML
<div class="menu-item">перший елемент menu-item</div>
<div class="menu-item">другий елемент menu-item</div>JS
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');
});
});HTML
<header>
<h2 class="title">HTML Events: mouseenter</h2>
<p class="description">Збільшення зображення при наведенні курсора миші за допомогою події mouseenter.</p>
</header>
<main>
<div class="result">
<!-- Галерея з трьома зображеннями -->
<div class="gallery">
<img class="gallery-item" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Image 1">
<img class="gallery-item" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Image 2">
<img class="gallery-item" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Image 3">
</div>
</div>
</main>CSS
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
header h2.title {
padding-bottom: 15px;
border-bottom: 1px solid #999;
}
header p.description {
font-style: italic;
color: #222;
}
.result {
background-color: #f8f8f8;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
.gallery {
display: flex;
gap: 10px;
}
.gallery-item {
width: 150px;
height: 150px;
transition: transform 0.3s ease;
}
.gallery-item:hover {
cursor: pointer;
}JS
// Отримуємо всі елементи галереї
const galleryItems = document.querySelectorAll('.gallery-item');
// Додаємо подію mouseenter для збільшення зображення
galleryItems.forEach(item => {
item.addEventListener('mouseenter', function () {
item.style.transform = 'scale(1.5)';
});
// Додаємо подію mouseleave для повернення зображення до нормального розміру
item.addEventListener('mouseleave', function () {
item.style.transform = 'scale(1)';
});
});
//# sourceURL=pen.jsКоментарі
Коментарів ще немає — будьте першим!