Search code examples
csspseudo-class

Psuedo-class to keep div visible on focus / active?

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/

Solution

  • 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.