Title

:hoverとは

ここで説明する:hover とは次の語句からなるCSSの疑似クラスです。

hover

読み: ホバー
意味: 空中を舞う、空中に停止する

目次に戻る

:hover疑似クラスの概要

この疑似クラスはセレクタに該当する要素にマウスポインターなどのユーザーインターフェースがホバーした時に適用され 一時的なプロパティ値の変更を行います。

このホバーはマウスポインタ―が「通過する」という意味で解釈するか、マウスオーバーと捉えて問題ありません。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。この疑似クラスの記述は以下のような書き方になります。

セレクター:hover{プロパティ名: 設定値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

サンプルに使うのはdiv要素です。 この要素に:hover疑似クラスを使ってプロパティ値の一時的な変更を見てみたいと思います。

目次に戻る

参考: 要素にマウスオーバーした時を検知する

ここではdiv要素にマウスポインターがホバーした時に境界線と背景色の色を変更するようにしています。

div{
	width: 200px;
	height: 200px;
	border: thin solid ##gray;
	background-color: ##khaki;
}
div:hover{
	border: thin solid ##red;
	background-color: ##lightcoral;
}

目次に戻る