1

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.

Hemerson Varela
  • 24,034
  • 16
  • 68
  • 69
user2463516
  • 133
  • 1
  • 1
  • 4
  • normally the `:hover` becomes a `:active` on mobile devices and tablets – ErikMes Jun 07 '13 at 12:58
  • Hover events on touch devices aren't great for interface elements because they're unreliable and tricky to predict (because there's no real world hover action for touch). Would you be happy with a jQuery solution? – Tom Maitland Jun 07 '13 at 13:08
  • Just something I picked up, you say "...another div bearing the `#MAIN_NAVIGATION` id. I doubt it's got anything to do with your problem, but an ID should be unique. If you need to give two elements the same styles, use a class instead. – GusRuss89 Jun 07 '13 at 13:12
  • There are some nice JS solutions here: http://stackoverflow.com/questions/2851663/how-do-i-simulate-a-hover-with-a-touch-in-touch-enabled-browsers?rq=1 – ralph.m Jun 07 '13 at 13:19
  • @ErikMes I tried replacing `:hover` with `:active` but it doesn't work on my iPad still. – user2463516 Jun 07 '13 at 13:35
  • @GusRuss89 Hello! I'm sorry I had a mistake in my question. What I meant was the `#MAIN_NAVIGATION` div only disappears when I click another clickable div (e.g. `#MAIN_NAVIGATION_2`). – user2463516 Jun 07 '13 at 13:36
  • Hello @TomMaitland is jQuery the only solution? I'm not really familiar with jQuery but I'm willing to take a shot. – user2463516 Jun 07 '13 at 13:37
  • jQuery would be a fairly solid solution, not the only one. The answer in @ralph.m comment is all it would need. – Tom Maitland Jun 07 '13 at 14:05

1 Answers1

0

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/
CarambaMoreno
  • 61
  • 5