1

情况

我想创建一个<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是鼠标悬停时显示的 div#MAIN_NAVIGATION

问题

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

问题

在触摸设备上，如何#NAVIGATION_POP_DROP通过以下方式再次隐藏 div：（1）点击另一个元素，（2）滚动屏幕，或（3）点击同一个#MAIN_NAVIGATIONdiv？

注意：#MAIN_NAVIGATIONdiv 元素没有链接。

我想要的效果类似于Mashable的菜单。

我希望有人可以帮助我。我是使用 CSS 的新手，我在设计触摸设备方面没有太多知识。谢谢你。

4

1 回答 1

0

我建议使用伪选择器 :after，如下所示：

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

请参阅我的示例工作：

http://jsfiddle.net/wNrdp/
于 2013-09-27T22:53:55.230 回答