处理鼠标悬停| onmouseout

时间:2019-05-05 12:00:51

标签: javascript

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

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

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

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

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

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

最诚挚的问候

1 个答案:

答案 0 :(得分:0)

添加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元素上时,您会看到它。 (但这将是单击手机/平板电脑)