liguofeng29’s blog

個人勉強用ブログだっす。

CSS3.0の各種修飾 - cursor属性

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> cursor属性 </title>
   <style type="text/css">
        div#container {
            border: 1px solid black;
            padding: 5px;
            width: 600px;
            height: 140px;
            display: box;
            display: -moz-box;
            display: -webkit-box;
            box-orient: vertical;
            -moz-box-orient: vertical;
            -webkit-box-orient: vertical;
        }
        div>div {
            border: 1px solid #aaf;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            border-radius: 12px 12px 0px 0px;
            padding:5px;
        }
    </style>
</head>
<body>
<div id="container">
    <div style="cursor: auto">auto ブラウザが自動的に選択したカーソル</div>
    <div style="cursor: default">default 矢印型など利用環境の標準カーソル</div>
    <div style="cursor: pointer">pointer リンクカーソル</div>
    <div style="cursor: crosshair">crosshair 十字カーソル</div>
    <div style="cursor: move">move 移動カーソル</div>
    <div style="cursor: text">text テキスト編集カーソル</div>
    <div style="cursor: wait">wait 待機・処理中カーソル</div>
    <div style="cursor: help">help ヘルプカーソル</div>
    <div style="cursor: n-resize">n-resize 北方向のリサイズカーソル</div>
    <div style="cursor: s-resize">s-resize 南方向のリサイズカーソル</div>
    <div style="cursor: w-resize">w-resize 西方向のリサイズカーソル</div>
    <div style="cursor: e-resize">e-resize 東方向のリサイズカーソル</div>
    <div style="cursor: ne-resize;">ne-resize 北東方向のリサイズカーソル</div>
    <div style="cursor: nw-resize;">nw-resize 北西方向のリサイズカーソル</div>
    <div style="cursor: se-resize">se-resize 南東方向のリサイズカーソル</div>
    <div style="cursor: sw-resize;">sw-resize 南西方向のリサイズカーソル</div>
    <div style="cursor: progress">progress 進行中カーソル(CSS 2.1より仕様に追加)</div>
    <div style="cursor: hand">hand 指型カーソル(IE4以上の独自拡張)</div>
    <div style="cursor: no-drop">no-drop ドロップ禁止カーソル(IE6以上の独自拡張)</div>
    <div style="cursor: all-scroll">all-scroll 全スクロールカーソル(IE6以上の独自拡張)</div>
    <div style="cursor: col-resize">col-resize 横方向のリサイズカーソル(IE6以上の独自拡張)</div>
    <div style="cursor: row-resize">row-resize 縦方向のリサイズカーソル(IE6以上の独自拡張)</div>
    <div style="cursor: not-allowed">not-allowed 禁止カーソル(IE6以上の独自拡張)</div>
    <div style="cursor: vertical-text">vertical-text 縦書きカーソル(IE6以上の独自拡張)</div>
</div>
</body>
</html>

f:id:liguofeng29:20160205003134p:plain