Javascript 处理onmouseover | onmouseout

我有一个HTML列表，其中包含许多包含字符串（“xyz”）的项。当用户将鼠标悬停在列表的某个项目上时，将创建一个单独的区域，该区域应显示该项目的说明

每一项都调用一个函数

Object.onmouseover=MyFunction

这将显示上的描述和函数

Object.onmouseout=MyFunction

这将隐藏描述

问题是，网站上没有足够的空间来容纳一个只包含描述的区域，而描述的区域总是有不同的大小

如果用户快速悬停在列表上，则会显示一些描述，但不会再次隐藏。由于描述显示在列表中某些项目的前面，因此创建的区域现在会阻止某些项目并使其不可用（您不能再悬停/单击它们）

使此列表不可用对用户性能有很大影响，大多数情况下会迫使用户重新加载网站并重新执行大约5-10分钟的过程

那么，有没有任何方法可以显示和隐藏描述而不使用

Object.onmouseover=MyFunction

和

Object.onmouseout=MyFunction

调用函数

---

致以最诚挚的问候

添加HTML并用CSS隐藏它

显示：无

正如RajmondX所说，在查看始终可见的项目时，可以使用CSS选择器
：hover{dispay:block/inline block/flex；}

例如，HTML如下所示：

<nav>
   <ul>
      <li>
        ...
      </li>
   </ul>
</nav>

ul {
  display: none;
}

ul {
  display: none;
}

nav:hover ul {
  display: block;
}

ul
将有不同的描述，然后您可以添加如下CSS：

<nav>
   <ul>
      <li>
        ...
      </li>
   </ul>
</nav>

ul {
  display: none;
}

ul {
  display: none;
}

nav:hover ul {
  display: block;
}

这样，当您将鼠标悬停在ul元素上时，您将看到它。（但它会点击手机/平板电脑）
添加HTML并用CSS隐藏它
显示：无

正如RajmondX所说，在查看始终可见的项目时，可以使用CSS选择器
：hover{dispay:block/inline block/flex；}

例如，HTML如下所示：

<nav>
   <ul>
      <li>
        ...
      </li>
   </ul>
</nav>

ul {
  display: none;
}

ul {
  display: none;
}

nav:hover ul {
  display: block;
}

ul
将有不同的描述，然后您可以添加如下CSS：

<nav>
   <ul>
      <li>
        ...
      </li>
   </ul>
</nav>

ul {
  display: none;
}

ul {
  display: none;
}

nav:hover ul {
  display: block;
}

这样，当您将鼠标悬停在ul元素上时，您将看到它。（但可能是点击手机/平板电脑）
我建议在您的案例中使用css（
：hover
）。在
MyFunction
中发生了什么导致大小变化？我建议在您的案例中使用css（
：hover
）。
MyFunction
中发生了什么导致大小变化？谢谢您的回答！在我的例子中，我使用
Object.insertBefore
和
Object.removeChild
来显示和隐藏描述区域。不幸的是，我使用哪种方法并不重要，因为如果您将鼠标快速（在porpuse上或不在porpuse上）悬停在多个项目上，就会发生错误。因此，实际的问题是，
Object.onmouseout
有时不被调用。我基本上是在寻找另一种调用函数的方法，而不是更改隐藏/显示函数，因为它们不会引起任何问题。我不完全确定如何解决这一问题，但在性能方面，总是将元素添加和删除到DOM树结构并不有趣。最好在页面加载时添加一次，然后在视觉上隐藏它们。仅在悬停时显示它们。如果你真的想在目前的解决方案上走得更远，那么我将无能为力。谢谢你的回答！在我的例子中，我使用
Object.insertBefore
和
Object.removeChild
来显示和隐藏描述区域。不幸的是，我使用哪种方法并不重要，因为如果您将鼠标快速（在porpuse上或不在porpuse上）悬停在多个项目上，就会发生错误。因此，实际的问题是，
Object.onmouseout
有时不被调用。我基本上是在寻找另一种调用函数的方法，而不是更改隐藏/显示函数，因为它们不会引起任何问题。我不完全确定如何解决这一问题，但在性能方面，总是将元素添加和删除到DOM树结构并不有趣。最好在页面加载时添加一次，然后在视觉上隐藏它们。仅在悬停时显示它们。如果你真的想在目前的解决方案上走得更远，那么我帮不了你什么忙。