問題
カーソルをCSSで変化させるには？
解決策
cssの「cursor」で、カーソルを変化させることができます。
カーソルを変化させたい。
aタグでなくてもjavascriptとの関係でクリックさせたいために矢印のカーソルにしたかったりする時のために、カーソルをCSSで変化させる方法をご紹介します。
DEMOはこちら
- cursor: default;
- cursor: pointer;
- cursor: wait;
- cursor: not-allowed;
- cursor: zoom-in;
- cursor: grab;
HTMLはこちら
<ul class="corsur-list clearfix">
<li class="default">cursor: default;</li>
<li class="pointer">cursor: pointer;</li>
<li class="wait">cursor: wait;</li>
<li class="not-allowed">cursor: not-allowed;</li>
<li class="zoom-in">cursor: zoom-in;</li>
<li class="grab">cursor: grab;</li>
</ul>CSSはこちら
.corsur-list{
margin-bottom: 15px;
letter-spacing: -.4em;
}
.corsur-list > li{
display: inline-block;
vertical-align: middle;
margin: 0 10px 10px 0;
padding: 10px;
color: #F15A24;
text-decoration: none;
text-align: center;
background-color: #ffffff;
border: 1px solid #F15A24;
letter-spacing: normal;
}
.corsur-list > li:last-child{
margin-right: 0;
}
.corsur-list > li.default{
cursor: default;
}
.corsur-list > li.pointer{
cursor: pointer;
}
.corsur-list > li.wait{
cursor: wait;
}
.corsur-list > li.not-allowed{
cursor: not-allowed;
}
.corsur-list > li.zoom-in{
cursor: zoom-in;
}
.corsur-list > li.grab{
cursor: grab;
}ポイント!
- 「cursor」で、カーソルを変化させることができます。
css「cursor」の種類の一部のご紹介
| default | 通常のカーソル（矢印マーク）。 |
|---|---|
| pointer | リンクを示す、指差しマーク。 aタグのデフォルトです。 |
| wait | 読み込み中で操作ができないことを示すマーク。 |
| not-allowed | 操作ができない、制限されていることを示すマーク。 |
| zoom-in | 拡大、縮小ができることを示す、虫メガネマーク。 |
| grab | 移動またはドラッグできることを示す、グラブマーク。 |
参考ページ
以下のサイトが、より詳しく解説してくれています。
【cursor – CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/cursor
コメント