CSSの擬似クラス「:hover」で作るちょっと変わったメニュー - Trans

IE7の大きな進歩の1つといえば、a要素以外にも:hover擬似クラスが指定できるようになったこと。では、これを使ってどんなWebデザインができるのかについて3つの事例を調べてみました。 CSS hover effect | Veerle's blogより。 サンプルはKansas City Homes for Sale | Prudential Kansas City Real Estateの真ん中あたりのタブです。タブ内にマウスを持っていくと背景色が変わると思います。 これを作るためには、次の2つの画像を用います。 コードはこんな感じです。解説はCSSのコメントと一緒に書いておきました。ちなみに、事例の3つとも画像置換を使っていますが、その説明は省略しています。 <h2>4 different ways to find your Kansas City Homes for Sale</

[tsujichun]

コーディング_css

[osogo]

css li :hover

[Sio_Ikzk]

hover

[crosse]

クラス属性　a:hover

[webmarksjp]

Web2.0

[bigchu]

: a以外にも擬似クラスhoverを指定できるのか、これは発見ね

[Kazabana]

IE6での動作はコメント欄も要参照。

[takuya-itoh]

リンク先のサイトは要参考

[hiro_y]

hoverを使ったナビゲーションをいろいろ紹介。

[glcs]

面白いけど実用はまだ難しいかなあ。