javascript - JS - mouseover 和 mouseout 事件不稳定

Question

HTML

<a class="level-item like-icon">
    <div class="icon is-medium">
        <i class="far fa-heart" onmouseover="change(true)" onmouseout="change(false)"></i>
    </div>
</a>

JS

change = (state) => {
    state
        ? event.currentTarget.setAttribute('data-prefix', 'fas')
        : event.currentTarget.setAttribute('data-prefix', 'far');
};

目标:
当有人将鼠标悬停在图标上时更改图标(类，或在本例中为属性)，并在用户将鼠标悬停在图标上时将其还原。上面的代码似乎有效，但有几个问题。 1) 当我将鼠标悬停在它上面时，它会触发很多次 2) 很多次，它不会将属性改回“far”(state = false)。我尝试将这些事件附加到 <a>而不是 <li>但问题仍然存在。

附注不使用 JQUERY

Answer 1

像这样的吗？

这里我添加和删除一个类hover，但ti也可以是任何属性或其他东西

window.addEventListener('mousemove', e => {
  let hovered = document.querySelector('.hover');
  if (e.target === hovered) return;
  if (hovered) { 
    console.log('mouse out from', hovered);
    hovered.classList.remove('hover');
  }
  if (!e.target.classList.contains('icon')) 
    return;
  e.target.classList.add('hover');
  console.log('mouse over on', e.target)
})

.icon {
  display: inline-block;
  width: 50px;
  height: 50px;
  transition: 100ms;
  border: solid;
  text-align: center;
  line-height: 50px;
}

.hover {
   color: red;
   border-radius: 30%;
   transform: rotate(10deg)
}

<div class="icon">1</div>
<div class="icon">2</div>
<div class="icon">3</div>
<div class="icon">4</div>
<div class="icon">5</div>
<div class="icon">6</div>
<div class="icon">7</div>