Я хочу слушать событие наведение на элемент .list
и уведение с него.
Но получается так, что когда я навожу на вложенный элемент, срабывает уведение, а когда навожу на пустое место list, срабатывает наведение.
Это поведение мне не подходит, как избавиться от этого?
const list = document.querySelector('.list');
list.addEventListener('mouseover', (e) => {
e.stopPropagation();
console.log('over');
});
list.addEventListener('mouseout', (e) => {
e.stopPropagation();
console.log('out');
});
.list {
background-color: black;
color: white;
padding: 15px;
font-family: sans-serif;
}
<div class="list">
<div class="list__item">
<span class="list__item-text">текст</span>
</div>
<div class="list__item">
<span class="list__item-text">текст</span>
</div>
<div class="list__item">
<span class="list__item-text">текст</span>
</div>
</div>