鼠标悬停事件有什么用?

What are mouseover events good for?

因此,似乎在第一次听说 mouseover 事件时,人们可能想使用它们为网站添加额外的功能。例如,在悬停时显示一些额外的细节,或触发动画。

此外,人们可能会假设(就像我所做的那样)没有前一个 mouseoverclick 是移动设备上必须发生的事情,因为没有鼠标。

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

因此,我们不想在鼠标悬停期间执行操作(display/animate 某些操作),因为在移动设备上,此事件会在点击前立即发生。

而且我们不能将鼠标悬停事件的存在作为用户拥有鼠标的指示器。

那么实际上,什么时候使用鼠标悬停事件是安全的?为了什么目的?

鼠标悬停对 UI 个实例仍然有用,我认为这样做是安全的。

一些示例:

  • 将鼠标悬停在 link 上,然后在 link
  • 上触发更深的字体和下划线
  • 将鼠标悬停在菜单中的选项卡(例如亚马逊的 "browsing history" 或购物车)
  • 将鼠标悬停在产品页面中的图片以放大照片

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

我的建议是永远不要让 "actionable" 弹出窗口依赖于鼠标悬停,并且 buttons/links 应该总是看起来可点击而不依赖 mouseover/hover 效果。

如果弹出窗口包含按钮或表单字段,或者对于网站功能而言必不可少,则应通过单击来触发它以确保它可以在所有设备上访问。我通常只使用鼠标悬停事件来显示信息性工具提示和用于可点击元素的附加(但不是绝对必要的)样式。如果在移动设备上需要信息工具提示,它们仍然可以点击。

那么它们有什么用呢?电子商务网站通常受益于悬停 "quick views" 以显示额外的产品图像,这些图像也可以通过单击该项目来访问。当悬停 styles/animations 增强网站的整体感觉并在整个设计系统中表现一致时,悬停 styles/animations 在美学上令人愉悦,如 Google 的 Material 设计。