Question

I have a div that is hidden until the user clicks on a link. Using the a:active + div selector the div is shown. I then have div:active, div:focus to keep the div visible.

Whilst making the div appear was simple enough, keeping it visible is the problem I have. If I click on the div (taking the active off the link and placing focus / active on the div) then the div disappears again.

I have tried using div:hover and while that shows the div (even after I click on it) when I hover off the div still disappears. Why are :active and :focus not being applied to my div?

Example: http://jsfiddle.net/pJWPE/

Answer 1

You could take a different approach, using the :target pseudoclass instead. The best way to illustrate this is with an example:

#box {
  display: none;
}
#box:target {
  display: block;
}

<a href="#box">Open</a>  <a href="#">Close</a>

<div id="box">content</div>

Warning, I’m not sure what browser support is like for this example. It works in my version of Chrome.