移动设备上的悬停效果

Posted 2023-05-08

技术标签:

【中文标题】移动设备上的悬停效果【英文标题】：Hover effect on mobile devices 【发布时间】：2014-10-18 08:26:37 【问题描述】：

我对 CSS 悬停效果有疑问。我使用悬停导航来激活带有显示类的子菜单。在移动设备上，我的问题是没有悬停，所以我只能单击主菜单但看不到子菜单。有没有办法让它在移动设备上工作？

【问题讨论】：

***.com/questions/2427447/…对你有帮助。 【参考方案1】：

在移动设备上，hover 属性是无用的，因为用户必须用手指滚动页面，通过悬停（按住）它会触发其他设备选项。所以最好的解决办法是通过点击主菜单打开子菜单。

编辑（根据 OP 的要求）：http://jsfiddle.net/eyyuLs65/

编辑 2：http://jsfiddle.net/hp3hy96w/1/

【讨论】：

如何在第一次点击时打开子菜单，然后在第二次点击时打开主菜单链接？使用 jQuery 还是 javascript？如果菜单点是一个链接。我如何防止在第一次单击打开子菜单和第二次单击链接时出现这种情况？如果我有多个主菜单，如何防止所有子菜单都被打开？看这里：jsfiddle.net/hp3hy96w 查看我的编辑 2，我添加了一个属性计数器，因此您可以拥有无限的菜单，因为静态变量仅适用于一个。至于链接的事情，如果你没有设置任何 preventDefault 到链接，它会打开链接的 url【参考方案2】：

我使用 ontouchstart 事件来触发 mouseenter 事件，因此这会渗透到伪类 :hover 事件。

我将它用于工具提示目的，以便在移动设备上工作。

在以下示例中，我为所有具有 w3-tooltip 类的 html 集合添加了一个事件处理程序

// On mobile devices the ontouchstart event exists, 
// so we get it to trigger a mouseenter event, hence a :hover() event
function misc_mobileSetup() 
  var list = document.getElementsByClassName("w3-tooltip");
  for (var i in list) 
    list[i].ontouchstart = function() list[i].mouseenter();;

【讨论】：