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 для контролю виходу курсора з елемента. Це дозволяє створювати інтерактивні ефекти, що активуються при наведенні курсора і зникають, коли курсор залишає область елемента.

правити

Порада

Подію mouseenter можна комбінувати з анімаціями CSS для створення плавних ефектів при наведенні. Наприклад, зміна кольору, масштабу або інших властивостей елемента може зробити ваш інтерфейс більш динамічним і чуйним на дії користувача.

автор: Bond правити

Порада

Для створення інтерактивних списків або меню mouseenter зручний, оскільки він забезпечує стабільну роботу в складних структурах без надмірних подій від дочірніх елементів, що може бути корисно при наведенні на багаторівневі меню.

автор: Bond правити

Порада

Якщо обробляєте подію mouseenter на великих об'єктах або компонентах, переконайтеся, що подія дійсно необхідна, щоб уникнути навантаження на продуктивність. Наприклад, якщо ви додаєте ефект тіні або складну анімацію, обмежте це на легших елементах, щоб сторінка не уповільнювалася.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.addEventListener('mouseenter', function(event) {
  // Обробка події
});

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	30	10	7	17	12	5.5

Підтримка: мобільні переглядачі

Переглядач
	4.4	30	10	7

Приклади

+ запропонувати свій приклад у пісочниці

<div id="card">Демонстраційний елемент</div>

const card = document.getElementById('card');
card.addEventListener('mouseenter', function() {
  card.style.backgroundColor = '#e0e0e0';
});
card.addEventListener('mouseleave', function() {
  card.style.backgroundColor = 'white';
});

<div class="menu-item">перший елемент menu-item</div>
<div class="menu-item">другий елемент menu-item</div>

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');
  });
});