1

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

1 ответ 1

2

Используйте 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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.