CSS3 onclick activate another DIV's animation

Question

I've got a menu bar that links to anchors on my page. At the moment there's content within the page which is animated to fade in using CSS3 on the initial page load but I'd like instead for them to fade in after the certain anchor link in the menu bar is clicked. How do I do that?

Eg. About is pressed then .aboutinfo CSS animation is activated.

Solution 1

Here is a demo to have an onclick even with CSS only (no javascript) http://jsfiddle.net/kevinPHPkevin/K8Hax/

CSS

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

HTML

<a href="#box1">Click Me</a>
<div id="box1">test test</div>

Solution 2

To do That You can use the '+' symbol

For eg.

if i want the color of a circle to change when i hover over a box then

Check out:

http://jsfiddle.net/utkarshd/Hh38R/

HTML

<div class="box"></div>
<div class="circle"></div>

CSS

.box{width:100px; height:100px; background-color:yellow;} 

.circle{
width:100px;
height:100px;
border-radius:100px 100px;
background-color:orange;
-webkit-transition:all 0.7s;//for safari and chrome
-moz-transition:all 0.7s;//for mozilla
-o-transition:all 0.7s;//for opera
-ms-transition:all 0.7s;//for IE
}

.box:hover+.circle
{
background-color:blue;
}