如何创建一个DIV下拉另一个DIV：hover（桌面）和点击（触摸设备）使用CSS？ [英] How do I create a DIV that drops down another DIV on :hover (for desktop) and on tap (for touch devices) using CSS?

问题描述

情况

我想创建一个< div> 触发另一个< div> 以执行 visibility：visible / code>。我使用这个CSS代码：

  #MAIN_NAVIGATION {/ * } 
 
 #NAVIGATION_POP_DROP {
 visibility：hidden;} 
 
 #MAIN_NAVIGATION：hover> #NAVIGATION_POP_DROP {
 visibility：visible;} 
 
 #MAIN_NAVIGATION：hover {/ *更改原始样式以更改BG颜色* /} 
  pre> 
 
 
  #MAIN_NAVIGATION 是用于接受悬停的div的div id。 
  #NAVIGATION_POP_DROP 是当鼠标悬停在 #MAIN_NAVIGATION  
 
 
 
 问题 
 
 
 
上述CSS可以使用桌面/笔记本电脑。我已经搜索了一个解决方案为悬浮，以工作在触摸设备以及。问题是，当我点击 #MAIN_NAVIGATION 时， #NAVIGATION_POP_DROP 即使我点击另一个元素。触发 #NAVIGATION_POP_DROP 消失的唯一操作是当我点击具有 #MAIN_NAVIGATION  id的另一个div。 / p> 
 
 
 问题 
 
 
 
在触摸设备上，如何隐藏 #NAVIGATION_POP_DROP  div再次：
（1）点击另一个元素，
（2）滚动屏幕，或
  #MAIN_NAVIGATION  div？
 
 
 
注意： #MAIN_NAVIGATION  div元素不包含链接。
 
 
 
我想要的效果类似于 Mashable 。
 
 
 
我希望有人能帮助我。我是新使用CSS和我没有太多的知识设计触摸设备。谢谢。
解决方案
我建议使用伪选择器：after，像这样：
  #MAIN_NAVIGATION：hover：after {
 visibility：visible; content：'你的新div的内容'; / *在这里添加任何样式* /} 
  
查看我的示例working：
  http://jsfiddle.net/wNrdp/ 
  
 
The Situation

I want to create a <div> which triggers another <div> to execute visibility:visible from being hidden on :hover. I have done this using this CSS code:
#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 is the div id that is used for the div that accepts the hover.
#NAVIGATION_POP_DROP is the div that is shown when mouse is hovered on #MAIN_NAVIGATION

The Problem

The CSS above works using desktops/laptops. I have searched for a solution for the "hover" to work on touch devices as well. The problem is that when I tap on the #MAIN_NAVIGATION, the #NAVIGATION_POP_DROP doesn't close even if I tap on another element. The only action that triggers the #NAVIGATION_POP_DROP to disappear is when I tap on another div bearing the #MAIN_NAVIGATION id.

The Question

On touch devices, how do I hide the #NAVIGATION_POP_DROP div again by:
(1) tapping on another element,
(2) scrolling the screen, or
(3) tapping on the same #MAIN_NAVIGATION div?

Note: The #MAIN_NAVIGATION div element doesn't bear a link.

The effect I want is similar to the menu of Mashable.

I hope somebody could help me. I'm new in using CSS and I don't have much knowledge in designing for touch devices. Thank you.
解决方案
I would recommend using the pseudo-selector :after, like so: 
#MAIN_NAVIGATION:hover:after {
visibility: visible; content:'the content of your new div'; /* add any style here*/}
See my example working: 
http://jsfiddle.net/wNrdp/


                        
这篇关于如何创建一个DIV下拉另一个DIV：hover（桌面）和点击（触摸设备）使用CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！