HOVER CSS擬似クラス

クリックした時、立体的にボタンや文章が押されたように見せたい『疑似クラス:hover編』

CSS擬似クラス hover

　hover (ホバー)は「浮かぶ」という意味でCSSではボタンやリンクが押されたような立体的な視覚効果を演出する擬似プロパティです。

　このCSS擬似クラスであるhoverは、ヘリコプターの状態を表すhovering/ホバリング(空中で停止)やhovercraft/ホバークラフト(空気圧で機体を浮かせて走る水陸両用の乗り物)のhoverと同様です。

　スタイルシートの疑似クラスのひとつである[:hover]を設定すると例えばアンカーにマウスを近づけたり、クリックしたりした時に面白い変化をつける事ができます。

a:hover 
{
	position : relative ; 
	top : 5pt ; 
	bottom : 1pt ; 
	left : 2pt ; 
	right : 5pt ; 
	background-color : #ffff00 ; 
}

　設定するスタイルシートファイル(.css/.style)にこのように記述します。

　[ :hover ]は、これを付加するセレクタを基準としてホバー位置を設定、例えば、 position プロパティの値を relative として相対的に位置が決まるようにしておき、その後、上位置(top)・下位置(bottom)・左位置(left)・右位置(right)を設定しています。

　クリックした際に立体的にボタンが押されたように見えるように「元の文章(または画像)」と「クリックした時の文章(または画像)」の位置(ここでは単位をポイント(pt)にしていますが、ピクセル(px)などでも可)をずらして指定することによって実現しています。

　尚、ここでは、ホバー時の変化がわかりやすいように背景色 background-color を指定しています。

　ここではアンカーリンクの<A>タグに設定しているのでhtmlファイルで使用する際には通常通り

<a href="">クリックすると本当に押されてるように見える。</a>

のように記述すればOKです。

　お好きな感じになるようにいろんな数値をセットしてやってみて下さい。

　尚、hover は、a タグに限らず、body内に設定可能なあらゆる要素・タグで利用可能となっていますが、IEの場合、そもそもIE6以前のバージョン、IE7含む以降でも、doctype の全部、または、一部を省略している場合などには、aタグ以外で利用できないことがあるので留意が必要です。

　次は

2004-2008-someday