目的
- HTMLファイルの要素にカーソルが乗った時にカーソルの見た目を変更する方法をまとめる。
押さえるポイント
- カーソルの見た目を変更するにはcursorプロパティを使用する。
- 見た目は「text」「pointer」「default」の三種類より指定する。
書き方の例
- 下記にCSSファイルの内容を記載する。
要素の名前かクラス名 {
cursor: カーソルの見た目の名前;
}
より具体的な例
- h1要素にカーソルが乗った時にカーソルの見た目をtextに設定する。
- p要素にカーソルが乗った時にカーソルの見た目をpointerに設定する。
<h1>おはようございます。</h1>
<p>これは日本の朝の挨拶です</p>
- 下記にCSSファイルの内容を記載する。
h1 {
cursor: text;
}
p {
cursor: pointer;
}