nicepaper @ ウィキ
nicepaper @ ウィキ

リンクタグの場合は自動的にカーソルの形が変わりますが、jQueryの使用時にdivのboxなどに合わせた時にカーソルを変えたい時があります。そんな時にCSSでカーソルの形を変更する方法を記述していきます。11月15日記事

目次




cursorプロパティ

cssにはcursorプロパティが存在します。それを変更していきます。

コード

HTML 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>CSSでカーソルの形を変更する</title>
</head>
<body>
<div id="wrapper">
	<div class="button" id="cursor1">auto</div>
	<div class="button" id="cursor2">default</div>
	<div class="button" id="cursor3">pointer</div>
	<div class="button" id="cursor4">crosshair</div>
	<div class="button" id="cursor5">move</div>
	<div class="button" id="cursor6">text</div>
	<div class="button" id="cursor7">wait</div>
	<div class="button" id="cursor8">help</div>
	<div class="button" id="cursor9">n-resize</div>
	<div class="button" id="cursor10">s-resize</div>
	<div class="button" id="cursor11">w-resize</div>
	<div class="button" id="cursor12">e-resize</div>
</div>
</body>
</html>

CSS 

@charset "utf-8";
/* CSS Document */

#wrapper{
	margin: 10px auto;
	padding :20px;
	border:1px solid #000;
	width:480px;
	min-height: 400px;
}
div.button{
	width:458px;
	padding:10px;
	border: 1px solid #000;
	border-radius: 6px;
	text-align:center;
	margin-bottom: 10px;
}
#cursor1{
	cursor:auto;
}
#cursor2{
	cursor:default;
}
#cursor3{
	cursor:pointer;
}
#cursor4{
	cursor:crosshair;
}
#cursor5{
	cursor:move;
}
#cursor6{
	cursor:text;
}
#cursor7{
	cursor:wait;
}
#cursor8{
	cursor:help;
}
#cursor9{
	cursor:n-resize;
}
#cursor10{
	cursor:s-resize;
}
#cursor11{
	cursor:w-resize;
}
#cursor12{
	cursor:e-resize;
}



まとめ

意図的にカーソルを変えたい場合にのみ使用するようにし、あとはデフォルトで対応するといいと思います。
^ 以上

「CSSでカーソルの形を変更する」をウィキ内検索
最終更新：2015年11月16日 22:09