javascript 移动设备上的 CSS 下拉菜单。如何绕过：悬停
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20180920/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Drop down menu on mobile. how to get around :hover
提问by ikillbears
I've had a search and I couldn't find anything & also it's my first time using the site so hope it hasn't been asked.
我进行了搜索，但找不到任何内容，而且这是我第一次使用该网站，所以希望没有人问过它。
I've run into a situation. I'm by no means an experienced website maker. I'm learning as I go. I have a CSS drop down menu that works fine on desktop browsers. When I get into the realm of mobile I encounter a problem, namely that :hoverdoesn't work (obviously).
我遇到了一个情况。我绝不是经验丰富的网站制作者。我边走边学。我有一个在桌面浏览器上工作正常的 CSS 下拉菜单。当我进入移动领域时，我遇到了一个问题，即这:hover不起作用（显然）。
I found this : http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendlybut I can't get the ruddy thing to work.
我发现了这个：http: //osvaldas.info/drop-down-navigation-responsive-and-touch-friendly但我无法让红润的东西发挥作用。
The page in question I'm applying it to is here : http://www.inkslinger.co.uk/calibre/index.htmlI really can't work this out and its driving me absolutely batty. Any help would be really appreciated.
我正在应用它的有问题的页面在这里：http: //www.inkslinger.co.uk/calibre/index.html我真的无法解决这个问题，它让我非常生气。任何帮助将非常感激。
回答by Green Gremlin
I had the same problem and found an easy workaround which I have used here hover example
我遇到了同样的问题，并找到了一个简单的解决方法，我在这里使用了 悬停示例
The Post Natal and Ante Natal options, when hovered over, trigger the drop down, but you may notice that they are NOT links themselves. In my original model they were links, but when I realised this would not work on touch devices, I simply made them into triggers for the drop down boxes, and put the links inside the boxes too. So for you, your 'What we do' link, would not be a link, just a trigger for the dropdown menu, and then in the menu you can have your link to the 'what we do' info.
将鼠标悬停在 Post Natal 和 Ante Natal 选项上时，会触发下拉菜单，但您可能会注意到它们本身并不是链接。在我的原始模型中，它们是链接，但是当我意识到这在触摸设备上不起作用时，我只是将它们作为下拉框的触发器，并将链接也放在框内。因此，对您而言，您的“我们做什么”链接不会是一个链接，而只是下拉菜单的触发器，然后在菜单中您可以拥有指向“我们做什么”信息的链接。
It is also worth remembering that certain touch devices, such as some iPads, do not like hover states at all, if you find that the hover state won't trigger your dropdown menu, then add 'onclick="return true"' to the list item in question. This will usually make the hover state work like a click.
还值得记住的是，某些触摸设备，例如某些 iPad，根本不喜欢悬停状态，如果您发现悬停状态不会触发您的下拉菜单，则将 'onclick="return true"' 添加到有问题的列表项。这通常会使悬停状态像单击一样工作。
Hope this helps, what I've written represents about 3 days of poring over my library of reference books.
希望这会有所帮助，我所写的内容代表了大约 3 天的时间仔细阅读我的参考书库。
回答by Simon
Put this line of code inside your head tag like this:
把这行代码放在你的 head 标签中，如下所示：
<head>
<script>document.addEventListener("touchstart", function(){}, true);</script>
</head>
Create for your hover element an active class like this:
为您的悬停元素创建一个活动类，如下所示：
element:hover, element:active { Your CSS }
Voila.
瞧。
回答by Juan
We had this problem and changed the hover to clicks.
我们遇到了这个问题并将悬停更改为点击。
回答by Juan
Instead of using hover, which is of course impossible on touch devices, using :active would likely be a good start. Selection something is still possible on touch devices, bind the menu to the active state of a toggle and you're done.
而不是使用悬停，这在触摸设备上当然是不可能的，使用 :active 可能是一个好的开始。在触摸设备上仍然可以选择某些内容，将菜单绑定到切换的活动状态，然后您就完成了。
回答by agaase
You will have to switch from hover to click event for this case. There's no workaround for that.
对于这种情况，您必须从悬停切换到单击事件。没有解决方法。
You should definitely consider changing your design to have a hamburger styled menu which opens from left for touch devices.
您绝对应该考虑将您的设计更改为汉堡式菜单，该菜单从左侧打开以供触摸设备使用。
See this demo from the link that you posted. It changes to a different menu style when you open it in mobile device. http://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/
从您发布的链接中查看此演示。当您在移动设备中打开它时，它会更改为不同的菜单样式。 http://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/
Also if you want to have your top link as a direct link to other page; you can have two separate clicks on the top button for that. First click will open the menu and after the menu is opened you can assign the direct link to it as done in the above demo.
此外，如果您想将顶部链接作为指向其他页面的直接链接；为此，您可以在顶部按钮上单击两次。第一次单击将打开菜单，打开菜单后，您可以像上面的演示一样分配直接链接到它。
