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 дозволяє створювати складні інтерактивні взаємодії, реагуючи на рухи миші між елементами.
| Порада: | Поєднуйте |
| Порада: | Подія |
| Порада: | Якщо вам потрібно реагувати тільки на конкретний елемент без його дочірніх елементів, варто використовувати |
Синтаксис
Викликається, коли курсор миші наводиться на елемент або на будь-який його дочірній елемент.Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
Коли користувач наводить курсор на картку, вона змінює свій стиль (підсвічується) і показує приховану раніше додаткову інформацію. Після того, як курсор залишає область картки, додаткова інформація зникає, а стилі повертаються до початкових. Цей інтерактивний ефект можна використовувати для карток продуктів, які показують більше деталей при взаємодії з користувачем.
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 = '';
});
});Цей приклад створює просту підказку, яка з'являється при наведенні курсора на елемент. Підказка слідує за курсором, а при виході курсора з елемента зникає.
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';
});У цьому прикладі підсвічується кожен елемент списку при наведенні курсора. Подія mouseover застосовується до кожного елемента, і коли курсор залишає його область, фон повертається до початкового стану. Це корисно для інтерактивних інтерфейсів, де потрібно виділити активний елемент.
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 = '';
});
});