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