提问人：Amity 提问时间：10/17/2023 最后编辑：pilchardAmity 更新时间：10/17/2023 访问量：50
鼠标悬停事件出现故障
Mouseover event is glitchy
问：
我对 javascript 很陌生，所以由于缺乏更好的词，我使用术语“故障”来描述事件发生了什么。因此，当我将鼠标悬停在文本“显示消息”上时，应该会出现一个文本框，上面写着“欢迎使用 IT 202”。当它工作时，它似乎非常微不足道。当我将鼠标悬停在文本上时，横幅会闪烁进出，而且对于我到底在哪里徘徊也有点挑剔。所以我只想让它，这样当我悬停时，消息就会显示并且不会闪烁，而当我鼠标退出时，它就会消失。
const text = document.getElementById("text");
const banner = document.getElementById("banner");
text.addEventListener("mouseover", over);
text.addEventListener("mouseout", out);
function over() {
banner.style.display = "block";
}
function out() {
banner.style.display = "none";
}h1 {
background-color: blueviolet;
color: white;
width: 250px;
border: 2px solid black;
padding-top: 20px;
padding-bottom: 20px;
}
#text {
color: blueviolet;
width: 250px;
margin: 0;
}
p {
font-family: "Times New Roman", Times, serif;
font-size: 20px'
}<h1 id="banner">Welcome to IT202</h1>
<p>
<strong>Mouse over the text "Show Welcome" and the welcome message is displayed. Mouse out and the welcome messages disappears!</strong>
</p>
<p1 id="text">Show Welcome</p1>我尝试更改填充和边距，看看这是否是导致它的原因，但它没有改变任何东西。
答：
1赞
Illusion
10/17/2023
#1
元素的位置受元素位置的影响。当 消失时，它会导致 的位置发生变化，类似于鼠标输出效果。我不知道这是否是你想要的，但你可以改变而不是，这样位置就不会改变：<p1 id="text">Show Welcome</p1>bannerbannertextvisibilitydisplaytext
const text = document.getElementById("text");
const banner = document.getElementById("banner");
text.addEventListener("mouseover", over);
text.addEventListener("mouseout", out);
function over() {
banner.style.visibility = "visible";
}
function out() {
banner.style.visibility = "hidden";
}h1 {
visibility: hidden;
background-color: blueviolet;
color: white;
width: 250px;
border: 2px solid black;
padding-top: 20px;
padding-bottom: 20px;
}
#text {
color: blueviolet;
width: 250px;
margin: 0;
}
p {
font-family: "Times New Roman", Times, serif;
font-size: 20px'
}<h1 id="banner">Welcome to IT202</h1>
<p><strong>Mouse over the text "Show Welcome" and the welcome message is displayed. Mouse out and the welcome messages disappears!</strong></p>
<p1 id="text">Show Welcome</p1>我假设任何不允许移动的解决方案都会起作用（将 放在 下，使位置过时等）textbannertexttext
评论