リンクではない要素の上でマウスポインタを手(指)型にするCSS

一般的なブラウザでは、リンクの上にマウスポインタを載せるとマウスポインタの形が手(指)型に変化して「クリック可能」なことを示します。しかし、リンクにはなっていない(＝a要素ではない)場所でも、クリック可能なことを示すためにマウスポインタの形を手(指)型にしたいことがあります。
例えば、クリック時の動作をJavaScriptで記述していて、リンクにはしない(＝a要素以外の要素を使ってマークアップしている)場合などです。

このように、リンクではない場所でマウスポインタの形を手(指)型に変化させる方法もスタイルシートには用意されています。方法はとても簡単で、cursorプロパティを使えば良いだけです。

リンクではない場所でマウスポインタの形を手(指)型に変化させる表示例

以下の枠内には3つの画像があります。どれも単にp要素の中にimg要素を入れているだけで、リンクにはなっていません。それぞれマウスポインタを載せると以下のような動作になるはずです。

• 1つ目の画像：マウスポインタを載せても何も起きない。(通常の表示)
• 2つ目の画像：マウスポインタを載せると、ポインタがリンクのように手(指)の形になる。
• 3つ目の画像：マウスポインタを載せると、ポインタがリンクのように手(指)の形になった上で、背景色も変わる。

以下、実際にマウスポインタを載せて試してみて下さい。

上記のように、リンクではない場所でもリンクのようにマウスポインタの形状を変化させる方法は、スタイルシートを使えばとても簡単です。

リンクではない場所でマウスポインタの形を手(指)型に変化させるCSSソース

先程のような例を実現するには、下記のように記述します。
まず、HTMLソースは以下のようになっているとします。

	<p class="mousepointer-hand">
		<img src="summerriver.jpg" alt="写真">
	</p>

単にp要素の中にimg要素で画像を1つ入れているだけです。スタイルシートで装飾を加えるために、p要素には「mousepointer-hand」というclass名を付加しています。
その上で、CSSソースを以下のように記述します。

.mousepointer-hand {
	cursor: pointer;
}

たったこれだけです。とても簡単です。
cursorプロパティは、マウスポインタの形状を指定するプロパティです。標準値は「auto」なので状況に応じて自動的に変化します。この値を「pointer」にすれば、マウスポインタの形状は(リンクの上に載せた際のような)手の形になります。

なお、値に「default」を指定すると、何もない場所での標準のポインタになります。
値に「text」を指定すると、(リンクではない)文字列の上に載せた際のポインタになります。
これらを使えば、逆に「リンクなのに(a要素なのに)リンクではないように見せる」ことも可能です。

マウスポインタの形を手(指)型に変化させた上で背景色も変化させるCSSソース

さて、先の表示例の3つ目のように、(リンクではないのに)画像の上にマウスポインタを載せただけで背景色も変化させるには、以下のようにCSSソースを記述します。

.mousepointer-hand:hover {
	cursor: pointer;
	background-color: #ccffcc;
}

ここでは、hover疑似クラスを使っています。
リンクの上にマウスポインタが載った際に装飾を変化させる際は、a:hover { ～ }のように「a要素のhover疑似クラス」を使いますが、hover疑似クラスは何もリンク(a要素)に対してしか使えないわけではありません。よほど古いブラウザを除けば、他の要素にも指定可能です。

なので、「リンクではない要素」であっても、「マウスが載った際に装飾を変化させたい」なら、hover疑似クラスを使えば良いのです。

以上、リンクではない要素の上でマウスポインタを手(指)型にするCSSの書き方を紹介しました。

(更新日：2016年04月09日)