Javascript 来查看该 div 是否悬停

Question

我正在尝试编写一个纯 JavaScript 来知道特定的 div 是否处于悬停状态，如果悬停则变量 = true 否则 false。

$("#demo").hover(function(){
$(this).css("background-color", "yellow");
}, function(){
$(this).css("background-color", "black");
});

我尝试在网络中搜索，但我只得到基于 jquery 的解决方案。但我想要在 JavaScript 上实现。

<div id="demo">Hover on me</div>

任何人都可以帮助我编写与上面的 jquery 相同的 JavaScript 吗？

Answer 1

jQuery .hover() 方法绑定(bind)为 mouseover 和 mouseout 事件调用的两个函数。

如果您向这些事件添加事件监听器，则可以复制该行为。

function hover(el, hoverOnCb, hoverOffCb) {
  el.addEventListener("mouseover", hoverOnCb);
  el.addEventListener("mouseout", hoverOffCb);
}

var demoElement = document.getElementById("demo");

hover(demoElement, function() {
  this.style.backgroundColor = "yellow";
}, function() {
  this.style.backgroundColor = "black";
});

<div id="demo">Hover me!</div>

• this 与 jQuery 的 $(this) 工作方式相同
• this.style.backgroundColor = "black" 与 $(this).css("background-color", "black") 作用相同