处理鼠标悬停| onmouseout

Question

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

每个项目都调用一个函数     Object.onmouseover = MyFunction 将显示说明和功能     Object.onmouseout = MyFunction 将会隐藏说明。

问题是网站上没有足够的空间来容纳仅用于保存描述的区域，并且描述区域始终具有不同的大小。

如果用户将鼠标悬停在列表上，则会显示一些说明，但不会再次隐藏。因为描述显示在列表中某些项目的前面，所以现在创建的区域会阻止某些项目并使它们不可用（您无法再悬停/单击它们）。

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

因此，有没有办法显示和隐藏说明而不使用     Object.onmouseover = MyFunction 和     Object.onmouseout = MyFunction 调用功能？

最诚挚的问候

Answer 1

添加HTML并使用CSS display: none;

隐藏它

正如RajmondX所说，在浏览始终可见的项目时，您可以使用: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元素上时，您会看到它。 （但这将是单击手机/平板电脑）