我想监听.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>
使用
mouseenter
和mouseleave