How do I create a DIV that drops down another DIV on :hover (for desktop) and on tap (for touch devices) using CSS?

问题

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.

回答1:

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/

来源：https://stackoverflow.com/questions/16984720/how-do-i-create-a-div-that-drops-down-another-div-on-hover-for-desktop-and-on

标签

html

css

hover

touch

tap