CSS | マウスカーソルを指（手）にする

2021-02-012021-02-08CSS マウスカーソル,CSS

CSSで特定のHTML要素上でマウスカーソルを指（手）にするサンプルコードです。

divやp要素などaタグ以外のHTML要素に対して、CSSやJavaScriptなどでボタン的な機能を実装する場合、マウスカーソルを指（手）にする事はユーザービリティの向上、おそらくはSEO的な観点からも必要なもののひとつだと考えられます。

See the Pen JavaScript | Point the mouse cursor by yochans (@yochans) on CodePen.

マウスカーソルを指にする

特定のHTML要素上でマウスカーソルを指にするには「cursor」プロパティで「pointer」を指定する事で実装できます。

IEの独自指定として「hand」というものもありましたが、現在は「pointer」のみの指定で問題ないかと思います。

cursor: pointer;

上記、動作サンプル内のHTMLとCSSのサンプルコードです。

<div id="pointer">pointer</div>

#pointer {
	width: 100px;
	margin: 10px;
	padding: 5px 10px;
	background: #8b4513;
	color: #FFF;
	font-size: 20px;
	cursor: pointer;
	transition-duration: 0.5s;
}

#pointer:hover {
	background: #63310D;
}

それがリンクボタンであった場合など、マウスカーソルの指（手）への変更に加えて、マウスホバー時に要素のスタイルを変更をすることでよりわかりやすくなります。