Наведение на контейнер с вложенными элементами

Question

Я хочу слушать событие наведение на элемент .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>

Answer 1

Используйте mouseenter и mouseleave

const list = document.querySelector('.list');

list.addEventListener('mouseenter', (e) => {
  console.log('over');
});

list.addEventListener('mouseleave', (e) => {
  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>

БЛОГ НА HUSL

Наведение на контейнер с вложенными элементами

Ответы (1 шт):