JS властивість Event.mouseover

Загальний опис

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

Однією з основних особливостей mouseover є те, що подія спливає (bubbling) вгору по DOM-дереву, тобто вона передається від дочірніх елементів до їхніх батьків. Це робить mouseover корисною для створення інтерактивних елементів, які повинні реагувати на наведення курсора на будь-яку частину елемента або його піделементи. Щоб використовувати mouseover, слід додати обробник за допомогою методу addEventListener:

const element = document.getElementById('myElement');
element.addEventListener('mouseover', function(event) {
  console.log('Курсор наведено на елемент або його дочірній елемент.');
});

Під час події передається об'єкт event, який містить корисну інформацію, таку як:

• target: елемент, на який наведено курсор.
• relatedTarget: елемент, з якого курсор пішов перед тим, як навести на новий елемент.

Подія mouseover часто використовується для створення спливаючих підказок (tooltips), підсвічування елементів інтерфейсу, показу додаткової інформації або взаємодії з меню. Її можна комбінувати з подією mouseout для обробки ситуації, коли курсор залишає область елемента.

element.addEventListener('mouseover', function() {
  element.style.backgroundColor = 'yellow';
});
element.addEventListener('mouseout', function() {
  element.style.backgroundColor = '';
});

Таким чином, подія mouseover дозволяє створювати складні інтерактивні взаємодії, реагуючи на рухи миші між елементами.

правити

Порада

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

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

Порада

Поєднуйте mouseover з mouseout для створення ефектів, які зникають після того, як курсор залишає елемент. Це дозволяє додавати або прибирати стилі або елементи під час навігації курсором.

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

Порада

Подія mouseover спливає (bubbling) вгору по DOM-дереву, що може бути корисним для обробки взаємодії з групами елементів. Наприклад, можна додати один обробник на батьківський елемент для керування взаємодією з усіма його дочірніми елементами.

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

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

Синтаксис

Викликається, коли курсор миші наводиться на елемент або на будь-який його дочірній елемент.

Переглядачі

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

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

Переглядач
	66	57	11.1	53	16

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

Переглядач
	66	66	57	11.3

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

Переглядач
	15.0.0	1.0

Приклади

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

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

const tooltip = document.createElement('div');
tooltip.style.position = 'absolute';
tooltip.style.padding = '5px';
tooltip.style.backgroundColor = 'black';
tooltip.style.color = 'white';
tooltip.style.display = 'none';
tooltip.textContent = 'Підказка';
document.body.appendChild(tooltip);

const element = document.getElementById('myElement');
element.addEventListener('mouseover', function(event) {
  tooltip.style.display = 'block';
  tooltip.style.left = event.pageX + 'px';
  tooltip.style.top = event.pageY + 'px';
});

element.addEventListener('mouseout', function() {
  tooltip.style.display = 'none';
});

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

const listItems = document.querySelectorAll('.list-item');

listItems.forEach(function(item) {
  item.addEventListener('mouseover', function() {
    item.style.backgroundColor = 'lightblue';
  });
  
  item.addEventListener('mouseout', function() {
    item.style.backgroundColor = '';
  });
});