一般的なブラウザでは、リンクの上にマウスカーソルを載せると指マークになります。しかし、CSSやJavaScriptなどでボタン的な機能を実装する場合、divやp要素などaタグ以外のHTML要素についてもマウスカーソルを指マークにしたい時があります。
そのため、今回は、CSSでマウスカーソルを指マークに変更する方法について解説します。
CSSでマウスカーソルを指マークに設定
CSSでマウスカーソルを指マークに設定するには、「cursor」プロパティで「pointer」を指定します。
style.css
div {
cursor:pointer
}
IEの独自指定として「hand」というものもありましたが、現在は「pointer」のみの指定で問題ないかと思います。
サンプルコード
CSSプロパティ「cursor」を利用した、サンプルコードです。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="pointer">提出</div>
</body>
</html>
style.css
# pointer {
width: 200px;
margin: auto;
background-color: #fba;
font-size: 40px;
text-align:center;
cursor: pointer;
border-bottom:4px solid #daa;
}
# pointer:hover {
opacity:0.6
}
cursorプロパティの値ですが、pointer以外にも色々あるので、場合によって値を変えるとより利便性が増すと思います。