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) Много раз, он не меняет атрибут обратно на «дальний» (состояние = false).Я попытался прикрепить эти события к <a> вместо <li>, но проблемы не исчезли.

ps НЕ используя JQUERY

Answer 1

Что-то вроде этого?

Здесь я добавляю и удаляю класс hover, но также может быть любой атрибут или что-то еще

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>

Answer 2

Вот вторая версия моего первоначального ответа, на этот раз с несколькими элементами.

var elements = document.getElementsByClassName("hover-icon");
var i;
for (i = 0; i < elements.length; i++) {
	element = elements[i];
  element.addEventListener('mouseover', function(data) {
  	console.log('Mouse over, set Font Awesome of ID ' + data.originalTarget.id + " here");
});

element.addEventListener('mouseout', function(data) {
  console.log('Mouse out, remove Font Awesome of ID ' + data.originalTarget.id  + " here");
});
} 

var event = new MouseEvent('mouseover', {
  'view': window,
  'bubbles': true,
  'cancelable': true
});

<a class="level-item like-icon">
    <div class="icon is-medium">
        <i id="hoverIcon1" class="hover-icon far fa-heart">ICON1</i>
        <i id="hoverIcon2" class="hover-icon far fa-heart">ICON2</i>
    </div>
</a>

Answer 3

Существует 7 событий 'onmouse ...' ...

onmousedown, 
onmouseenter, 
onmouseleave, 
onmousemove, 
onmouseout, 
onmouseover, 
onmouseup

..., поэтому важно использовать правильный для работы.

В примерещелчок и движение мыши внутри Элемента не применяются - все, что нам нужно, - это функция, которая вызывается один раз, когда мышь входит в , и элемент, и еще раз, когда мышь оставляет .Поэтому ...

<!-- HTML -->

<a class="level-item like-icon">
    <div class="icon is-medium">
        <i class="far fa-heart" 
           onmouseenter="change(this)"
           onmouseleave="change(this)"></i>
    </div>
</a>

Так что здесь представляется разумным использовать атрибуты onmouseenter и onmouseleave для вызова функции change(), и в этом случае передать элемент HTML под мышью какаргумент через ключевые слова this.

Теперь функция может тщательно исследовать элемент и проверить, имеет ли он требуемый и требуемый атрибут «data-prefix», и если да, то на что этот атрибут установлен.Затем мы можем использовать это условие для установки / сброса значения атрибута «data-prefix» ...

/* JavaScript */

change = (elem) => {
    // does the Element have a 'data-prefix' attribute
    // and what is it set to?
    let isSet = elem.hasAttribute("data-prefix") && (
        "far" === elem.getAttribute("data-prefix")
    );
    elem.setAttribute("data-prefix", (isSet ? "fas" : "far"));
}

Однако, как уже упоминалось, использование метода Element.addEventListener() более надежно и гибко, чем полагаясьв атрибутах HTML, таких как onmouse....

Answer 4

Это звучит как дубликат Как мне имитировать наведение мыши в чистом JavaScript, который активирует CSS ": hover"?

Это не идеальное решение для наведения мыши в чистом JS,но вот рабочий пример (вдохновленный ответом на пост, который я связал).

var element = document.getElementById('hoverIcon');
element.addEventListener('mouseover', function() {
  console.log('Mouse over, set Font Awesome class here');
});

element.addEventListener('mouseout', function() {
  console.log('Mouse out, remove Font Awesome class here');
});

var event = new MouseEvent('mouseover', {
  'view': window,
  'bubbles': true,
  'cancelable': true
});

<a class="level-item like-icon">
    <div class="icon is-medium">
        <i id="hoverIcon" class="far fa-heart">ICON</i>
    </div>
</a>