检测我是否使用 vanilla javascript 悬停一个元素

Question

我需要检测我是否仅使用 vanilla javascript 悬停一个元素。我正在尝试这个：

    this.element.addEventListener('mousemove', function () {

    var result = this.element.matches(':hover');

    if ( result ) {

      this.element.style.backgroundColor = "yellow";

    }

    console.log(result)

  }.bind( this )) 

但它没有按预期工作，因为它总是控制台记录“假”。

用例是：一个元素有一个类，如果我将其悬停，该类将被移除并添加另一个类。

我知道 jQuery 有它的“悬停”功能，但我只需要使用 vanilla javascript 来完成它。

Answer 1

使用 vanilla JS，您可以使用 onmouseover 标签。

<div onmouseover="myFunc(this)">hover me!</div>

function myFunc(el) {
  console.log('hovering element',el);
}

在此处阅读更多信息：https://www.w3schools.com/jsref/event_onmouseover.asp

但是，如果您想以编程方式将其添加到许多元素，则可以使用类选择器来执行此操作。

<div class="example">hover me!</div>
<div class="example">Also hover me!</div>

document.addEventListener("DOMContentLoaded", function(){
  // Handler when the DOM is fully loaded 
  var allMyHoverElements = document.getElementsByClassName("example");

  for (var i = 0; i < allMyHoverElements.length; i++) {
     allMyHoverElements.item(i).onmouseover = function() {
       console.log('Hello!');
     }
  }
});