css - CSS3 onclick 激活另一个 DIV 的动画

Question

我有一个链接到我页面上的锚点的菜单栏。目前，页面内的内容在初始页面加载时使用 CSS3 动画淡入，但我希望它们在单击菜单栏中的某个锚链接后淡入。我怎么做？

例如。About 被按下然后 .aboutinfo CSS 动画被激活。

Answer 1

这是一个演示，即使仅使用 CSS（无 javascript）也可以进行 onclick 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>

Answer 2

要做到这一点您可以使用“+”符号

例如。

如果我希望当我将鼠标悬停在一个框上时改变一个圆圈的颜色然后

查看：

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