問題 × 解決策

カーソルをCSSで変化させる方法

問題

カーソルを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

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

four + 1 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧