移动设备上的CSS下拉菜单.如何四处走动:悬停

CSS Drop down menu on mobile. how to get around :hover

本文关键字：何四处 悬停 下拉菜单 CSS 移动      更新时间：2023-09-26

我进行了一次搜索，但找不到任何东西&这也是我第一次使用这个网站，希望没有人问我。

我遇到了一种情况。我绝不是一个经验丰富的网站制作者。我边走边学。我有一个CSS下拉菜单，在桌面浏览器上运行良好。当我进入移动领域时，我遇到了一个问题，即:hover（显然）不起作用。

我发现：http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly但我无法让这件红润的东西发挥作用。

我正在应用的有问题的页面如下：http://www.inkslinger.co.uk/calibre/index.html我真的解决不了这个问题，这让我非常沮丧。如有任何帮助，我们将不胜感激。

我遇到了同样的问题，并找到了一个简单的解决方法，我在这里使用了它悬停示例

后纳塔尔和前纳塔尔选项，当悬停时，会触发下拉，但你可能会注意到它们本身并不是链接。在我最初的模型中，它们是链接，但当我意识到这在触摸设备上不起作用时，我只是把它们做成下拉框的触发器，并把链接也放在框内。因此，对你来说，你的"我们做什么"链接不会是一个链接，只是下拉菜单的触发器，然后在菜单中，你可以有"我们做了什么"信息的链接。

同样值得记住的是，某些触摸设备，如一些iPad，根本不喜欢悬停状态，如果你发现悬停状态不会触发下拉菜单，那么在有问题的列表项中添加"onclick="return true"。这通常会使悬停状态像单击一样工作。

希望这能有所帮助，我所写的内容代表了我花了大约3天时间仔细阅读我的参考书图书馆。

我们遇到了这个问题，并将悬停更改为单击。

使用：active可能是一个好的开始，而不是使用悬停（这在触摸设备上当然是不可能的）。在触摸设备上仍然可以选择一些东西，将菜单绑定到切换的活动状态，就完成了。

在这种情况下，您必须从悬停切换到单击事件。对此没有变通办法。

你绝对应该考虑改变你的设计，拥有一个汉堡风格的菜单，从左起为触摸设备打开。

请从您发布的链接中查看此演示。当您在移动设备中打开它时，它会变为不同的菜单样式。http://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/

此外，如果你想有你的顶部链接作为直接链接到其他页面；您可以在顶部按钮上分别单击两次。第一次点击将打开菜单，在菜单打开后，您可以像上面的演示中那样为其分配直接链接。

把这行代码放在你的head标签里，如下所示：

<head>
  <script>document.addEventListener("touchstart", function(){}, true);</script>
</head>

为你的悬停元素创建一个像这样的活动类：

element:hover, element:active { Your CSS }

沃伊拉。

相关文章：