HTML5 & CSS3 only Accordion Effect – aduca今日は右京くんに頼まれたのでアコーディオンエフェクトをHTML5とCSS3で実装する。 基本的なDOM構造はこんなもの、 - body `- section#accordion |- section | |- h2 | `- p |- section | `- ... |- section | `- ... `- section `- ... んでこれらにエフェクトを与えるのだけれど、その前にとりあえず現物のサンプル。 CSS Accordion CSSなどのコードもすべてこのHTML一枚にかいてあります。(Firefoxでも動くみたいだけどWebkit系ブラウザが一番綺麗にアニメーションします) hoverの関係 最下層のsection上にポインタがある場合、その親要素にも:hoverが付く。 これを利用しないと、単純に:not(:hover)してしまうと、普通の状態(ポインタが一切ない
