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

Posted 2023-05-08

【中文标题】检测我是不是使用 vanilla javascript 悬停一个元素

【英文标题】：Detect if Im hovering an element using vanilla javascript检测我是否使用 vanilla javascript 悬停一个元素

【发布时间】：2020-07-14 04:22:00

【问题描述】：

我需要检测我是否仅使用 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 来完成它。

【问题讨论】：

这能回答你的问题吗？ pure javascript to check if something has hover (without setting on mouseover/out)

【参考方案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!');
     
  
);