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”（状态= false）。我尝试将这些事件附加到<a>而不是<li>上，但是问题仍然存在。

p.s。不使用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>

Answer 2

这听起来像是How do I simulate a mouseover in pure JavaScript that activates the 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>

Answer 3

有7个'onmouse ...'事件...

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

...因此重要的是要使用合适的人。

在此示例中，单击和鼠标在Element中的移动均不适用-我们想要的只是当鼠标进入和元素时调用一次函数，而当鼠标叶子。因此...

<!-- 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个关键字。

现在，该函数可以检查元素并检查它是否具有所需和必需的“数据前缀”属性，以及是否具有该属性。然后，我们可以使用此条件来设置/重置“数据前缀”属性的值...

/* 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()方法比依赖onmouse...这样的HTML属性更健壮和灵活。

Answer 4

这是我最初回答的第二个版本，这次有多个内容。

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>

JS-mouseover和mouseout事件是不固定的

4 个答案: