Question

为什么鼠标悬停在这些设置事件上闪烁？

我尝试了以下代码

const headerTags1 = document.querySelector('h1');
headerTags1.addEventListener('mouseenter', function(event){
event.target.style.display = "none";
})
console.log(headerTags1)

const headerTags2 = document.querySelector('h1');
headerTags2.addEventListener('mouseleave', function(event){
event.target.style.display = "initial";
})
console.log(headerTags2)

Answer 1

之所以会发生这种情况，是因为您将鼠标悬停在h1上时会隐藏起来，并且由于它现在已隐藏了，因此您不再需要将鼠标悬停在它上面并且会mouseleave发射，因此会显示它，但随后您将鼠标悬停在它上面，以便隐藏起来，依此类推。

const headerTags1 = document.querySelector('h1');
headerTags1.addEventListener('mouseenter', function(event){
event.target.style.display = "none";
})
console.log(headerTags1)

const headerTags2 = document.querySelector('h1');
headerTags2.addEventListener('mouseleave', function(event){
event.target.style.display = "initial";
})
console.log(headerTags2)

<h1>Now you see me...</h1>

首先，这当然不是一个好的设计决定。您真正要完成的任务是什么？

编辑：

只希望按钮悬停时消失并重新出现或更好，但只需将鼠标悬停在上面即可更改颜色...

那么更好的方法是只在元素悬停时使用CSS :hover pseudo-class来修改元素的样式。

<!doctype html>
<html>
<head>
  <title>Page Title Here</title>
  <style>
    h1:hover { opacity:0; }
    button:hover { color:red; background-color:#ff0; }  
  </style>
</head>
<body>

  <h1>Now you see me...</h1>
  <button>Hover Over Me</button>
  
</body>
</html>

Answer 2

斯科特·马库斯（Scott Marcus）对闪烁进行了很好的解释。

作为替代方案，您可以使用样式的不透明度属性。但是该元素仍然可以点击。

const headerTags = document.querySelector('h1');

headerTags.addEventListener('mouseenter', function(event){
  event.target.style.opacity = 0;
})

headerTags.addEventListener('mouseleave', function(event){
  event.target.style.opacity = 1;
})

<h1>Now you see me...</h1>

MouseOver轻弹

2 个答案: