主页 / 问题 / 1352347
Accepted
Михаил Камахин
Asked:2022-04-21 20:16:50 +0000 UTC2022-04-21 20:16:50 +0000 UTC

将鼠标悬停在具有嵌套元素的容器上

  • 772

我想监听.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>

javascript

1 个回答

  1. Best Answer

    使用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>

    • 2

相关问题