处理onmouseover | onmouseout

Question

我有一个HTML列表，里面有很多包含字符串的项目("xyz")。当用户将鼠标悬停在列表中的某一项上时，将创建一个应显示该项描述的分离区域。

每一项都会在Object.onmouseover = MyFunction上调用一个显示描述的函数，并在Object.onmouseout = MyFunction上调用一个隐藏描述的函数。

问题是，网站上没有足够的空间来容纳仅包含描述的区域，并且描述的区域总是具有不同的大小。

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

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

那么，有没有办法在不使用Object.onmouseover = MyFunction和Object.onmouseout = MyFunction调用函数的情况下显示和隐藏描述呢？

诚挚的问候

Answer 1

添加超文本标记语言并用CSS display: none;隐藏它

正如RajmondX所说，当遍历always visible项时，可以使用:hover {dispay: block/inline-block/flex;}的CSS选择器。

例如，HTML如下所示：

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

CSS看起来像这样：

ul {
  display: none;
}

ul会有你不同的描述，然后你可以像这样添加CSS：

ul {
  display: none;
}

nav:hover ul {
  display: block;
}

这样，当您将鼠标悬停在ul元素上时，就会看到它。(但这将是在移动/平板电脑上点击)