Javascript 鼠标悬停

为什么鼠标悬停在这些设定的事件上

我尝试了以下代码

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

上，它就会隐藏，而且因为它现在是隐藏的，所以你不再在它上面滑动鼠标，而

mouseleave

会触发，所以它会显示，但你在它上面滑动鼠标，所以它会隐藏，依此类推

const headerTags1=document.querySelector（'h1'）；
headerTags1.addEventListener（'mouseenter'，函数（事件）{
event.target.style.display=“无”；
})
控制台日志（headerTags1）
const headerTags2=document.querySelector（'h1'）；
headerTags2.addEventListener（'mouseleave'，函数（事件）{
event.target.style.display=“初始”；
})
console.log（headerTags2）

---

现在你看到我了……

之所以会发生这种情况，是因为只要你将鼠标悬停在

h1

上，它就会隐藏，而且因为它现在被隐藏，你就不再在它上面滑动鼠标，而

mouseleave

会触发，所以它会显示出来，但你会在它上面滑动鼠标，所以它会隐藏，依此类推

const headerTags1=document.querySelector（'h1'）；
headerTags1.addEventListener（'mouseenter'，函数（事件）{
event.target.style.display=“无”；
})
控制台日志（headerTags1）
const headerTags2=document.querySelector（'h1'）；
headerTags2.addEventListener（'mouseleave'，函数（事件）{
event.target.style.display=“初始”；
})
console.log（headerTags2）

---

现在你看到我了……

斯科特·马库斯对闪烁给出了极好的解释

也可以使用样式的“不透明度”属性。但该元素仍然可以单击

const headerTags=document.querySelector（'h1'）；
headerTags.addEventListener（'mouseenter'，函数（事件）{
event.target.style.opacity=0；
})
headerTags.addEventListener（'mouseleave'，函数（事件）{
event.target.style.opacity=1；
})

---

现在你看到我了……

斯科特·马库斯对闪烁给出了极好的解释

也可以使用样式的“不透明度”属性。但该元素仍然可以单击

const headerTags=document.querySelector（'h1'）；
headerTags.addEventListener（'mouseenter'，函数（事件）{
event.target.style.opacity=0；
})
headerTags.addEventListener（'mouseleave'，函数（事件）{
event.target.style.opacity=1；
})

---

现在你看到我了…

如果没有a来查看问题，我们无法帮助。如果没有a来查看问题，我们无法帮助。只想让按钮在悬停时消失并重新出现，或者最好在悬停时更改颜色…好的，斯科特，我将悬停选项移到了导航，我知道这是错误的，但我不知道如何正确设置它…const homeNavLink=document.querySelector（'.nav a'）；addEventListener（'hover'，函数（事件）{h1:hover=color red；button:hover=background color:#ff0；}）@ScottMarcus@Jonaahfire不，你误解了。在我的示例中根本不需要JavaScript。只是CSS。您将CSS放在

元素中，该元素进入文档的

元素。没有JavaScript。我将更新答案，以显示完整文档结构的外观。只想让按钮在悬停时消失并重新出现，或者最好在悬停时更改颜色…好的，Scott我将悬停选项移到了导航中，我知道这是错误的，但我不知道如何正确设置它…const homeNavLink=document.querySelector（'.nav a'）；addEventListener（'hover'，函数（事件）{h1:hover=color red；button:hover=background color:#ff0；}）@ScottMarcus@Jonaahfire不，你误解了。在我的示例中根本不需要JavaScript。只是CSS。您将CSS放在

元素中，该元素进入文档的

元素。没有JavaScript。我将更新答案，以显示完整文档结构的外观。@Jonaahfire查看我关于不使用JavaScript执行此操作的答案。@Jonaahfire查看我关于不使用JavaScript执行此操作的答案。