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

Question

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

How the div looks

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

感谢。

Answer 1

好的 - 你能做的是：

• 将选项包装在div中，至少为移动视口媒体设为display:none
• for 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访问它，但不能通过点击或悬停等用户直接操作