鼠标悬停事件有哪些好处？

Question

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

此外，在没有鼠标的情况下，可能会假设（如我所做的那样）没有移动click的{​​{1}}会在移动设备上发生。

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

因此，我们不想在鼠标悬停时进行操作（显示/设置动画），因为在移动设备上，此事件会在单击之前立即发生。

并且我们不能将存在mouseover事件作为用户拥有鼠标的指示。

那么，实际上什么时候可以安全地使用mouseover事件，以及出于什么目的？

Answer 1

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

一些例子：

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

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

Answer 2

我的建议是永远不要使“可操作的”弹出窗口依赖于鼠标悬停，并且按钮/链接应始终看起来可单击，而不依赖于鼠标悬停/悬停效果。

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

那么它们有什么用？电子商务站点通常会受益于悬停的“快速视图”，以显示额外的产品图片，也可以通过单击该项目来访问它们。悬停的样式/动画可以增强网站的整体感觉，并在整个设计系统中保持一致，就像在Google的Material Design中一样。