鼠标悬停事件出现故障

Question

我对 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>

我尝试更改填充和边距，看看是否是这个原因造成的，但它没有改变任何东西。

Answer 1

<p1 id="text">Show Welcome</p1>

元素的位置受

banner

元素行为的影响。当

banner

消失时，它会导致

<p1>

元素的位置发生变化，类似于鼠标移出效果。为了解决这个问题，我们建议更改

banner

元素的可见性。通过进行此调整，元素将从视图中消失，同时仍占据相同的空间。这是修改后的代码：

  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";
  }

我们在 CSS 中将

banner

设置为默认隐藏：

h1{
  visibility: hidden;
  background-color: blueviolet;
  color: white;
  width: 250px;
  border: 2px solid black;
  padding-top:20px;
  padding-bottom:20px;
}