什么是鼠标悬停事件？

Posted 2021-04-13

因此，在第一次听到有关mouseover事件时，人们可能希望使用它们来为网站添加额外的功能。例如，在悬停时显示一些额外的细节，或触发动画。

此外，人们可能会假设（正如我所做的）没有先前的click的mouseover是移动设备上必须发生的事情，因为没有鼠标。

但移动浏览器（ios上的Safari）实际上会在click之前触发鼠标悬停。因此，任何在mouseover期间做一些有用的事情的机会现在都是毫无意义的。

因此，我们不希望在鼠标悬停期间采取行动（显示/动画某些内容），因为在移动设备上，此事件会在点击之前发生。

并且我们不能使用鼠标悬停事件的存在作为用户具有鼠标的指示符。

那么，实际上，使用鼠标悬停事件是否安全，以及用于何种目的？

答案

我的建议是永远不要依赖鼠标悬停来制作一个“可操作”的弹出窗口，并且按钮/链接应该总是看起来可以点击而不依赖鼠标悬停/悬停效果。

如果弹出窗口包含按钮或表单字段，或者对于网站功能必不可少，则应通过单击确定它是否可在所有设备上访问。我通常只使用鼠标悬停事件来显示信息工具提示以及可点击元素的其他（但不是绝对必要的）样式。如果移动设备上需要信息工具提示，它们仍然可以点击。

那么他们有什么好处呢？电子商务网站经常受益于悬停“快速浏览”以显示额外的产品图片，这些图片也可以通过点击该项目进行访问。悬浮样式/动画在加强网站的整体感觉并在整个设计系统中表现一致时，在美学上令人愉悦，就像Google的Material Design一样。

另一答案

鼠标悬停对UI实例仍然有用，我想说它是安全的。

一些例子：

• 将鼠标悬停在某个链接上，然后在链接上触发较暗的字体和下划线
• 将鼠标悬停在菜单中（例如亚马逊的“浏览历史记录”或购物车）
• 将图像悬停在产品页面中以放大照片

如果您觉得鼠标悬停会干扰您的移动版网站，您可以随时设置媒体查询。