问题:

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.

回答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>

回答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;
}