MouseOver闪烁
MouseOver闪烁
提问于 2019-05-29 20:50:18
为什么鼠标过度闪烁这些设置事件？
我尝试了以下代码
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)回答 2
Stack Overflow用户
回答已采纳
发布于 2019-05-29 21:02:25
斯科特马库斯给出了一个很好的解释闪烁。
作为另一种选择，您可以使用样式的不透明度属性。但这个元素仍然可以点击。
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>
Stack Overflow用户
发布于 2019-05-29 20:56:24
之所以会发生这种情况，是因为当您在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>
当然，这并不是一个好的设计决策。你到底想做什么？
编辑：
只是想让按钮消失，在它盘旋的时候重新出现，或者更好的是，当它盘旋时只改变颜色.
然后，更好的方法是只在元素悬停时使用 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56368308
复制相关文章
相似问题
腾讯云开发者
