html - 如何创建一个 DIV，它在 :hover (for desktop) and on tap (for touch devices) using CSS? 上下拉另一个 DIV

Question

情况

我想创建一个 <div>这会触发另一个 <div>执行 visibility:visible从被隐藏在:hover .我使用此 CSS 代码完成了此操作:

#MAIN_NAVIGATION { /* Styling goes here */ }

#NAVIGATION_POP_DROP {
visibility: hidden;}

#MAIN_NAVIGATION:hover > #NAVIGATION_POP_DROP {
visibility: visible;}

#MAIN_NAVIGATION:hover { /* Changes original styling to change BG color */}

#MAIN_NAVIGATION是用于接受悬停的 div 的 div id。 #NAVIGATION_POP_DROP是鼠标悬停在 #MAIN_NAVIGATION 上时显示的 div

问题

上面的 CSS 使用台式机/笔记本电脑工作。我已经在寻找“悬停”的解决方案，以便在触摸设备上也能正常工作。问题是当我点击 #MAIN_NAVIGATION , #NAVIGATION_POP_DROP即使我点击另一个元素也不会关闭。触发 #NAVIGATION_POP_DROP 的唯一操作消失是当我点击另一个带有 #MAIN_NAVIGATION 的 div 时编号。

问题

在触摸设备上，如何隐藏 #NAVIGATION_POP_DROP再次划分: (1) 点击另一个元素， (2) 滚动屏幕，或 (3) 敲击相同的#MAIN_NAVIGATION分区？

注意:#MAIN_NAVIGATION div 元素不包含链接。

我要的效果类似于Mashable的菜单.

我希望有人能帮助我。我是使用 CSS 的新手，我对触摸设备的设计了解不多。谢谢。

Answer 1

我建议使用伪选择器 :after，像这样:

#MAIN_NAVIGATION:hover:after {
visibility: visible; content:'the content of your new div'; /* add any style here*/}

查看我的示例:

http://jsfiddle.net/wNrdp/