不应该触发移动设备上的菜单

【问题标题】：Menu on mobile triggers when it shouldn't不应该触发移动设备上的菜单
【发布时间】：2016-10-26 11:44:16
【问题描述】：

基本上，我有一个 div 元素，里面有一个图像，当它悬停在它上面时会显示另一个 div 并带有一些可点击的选项。这一切都在 PC 上完美运行，您实际上可以将鼠标悬停在元素上，但在手机上悬停是不可能的，您必须按下图像才能显示菜单。问题是，如果我点击要显示菜单的图像，它会自动触发菜单中的选项，而不是仅仅显示它并需要再次点击选项。

How the div looks

有没有办法用 html/css 解决这个问题，如果没有，有没有使用 js 的解决方案？

谢谢。

【问题讨论】：

尝试将 CSS 上的 hover 更改为 active
试过了，还是和以前一样。
能否请您发布CSS代码
这里是：pastebin.com/gdBG6FSL（切换回悬停状态）
所以你的选项是查看和删除，当 div 超过时它们会出现；正确的？当您点击 div 视图或删除被激活（如“点击”）时，在移动设备上。

标签： javascript html css

【解决方案1】：

好的 - 你可以做的是：

将选项包装在一个 div 中，并将其设为 display:none，至少对于移动视口媒体而言
对于window.outerWidth <= 768在图像或需要点击以显示选项的 div 上添加一个单击事件，并在该单击事件上显示选项包装器 div
我不确定，但这可能适用于:active和:focus这样的css事件.parent:focus .optionsWrapper, .parent:active .optionsWrapper{display: block;}
无论如何，你的也使用display: none 而不是opactity:0

解释
opacity:0 只是隐藏元素，但它仍然存在
display:none 表示该元素不存在（简单来说）-确保您可以通过 javascript 访问它，但不能通过点击或悬停等用户直接操作

【讨论】：