「cursor(カーソル)について」無料ホームページテンプレート

cursorのブラウザ表示例

■CSS記述

.sample1 { cursor:pointer; }

■XHTML記述

<p class="sample1">マウスを乗せて下さい①</p>

■CSS記述

.sample2 { cursor:crosshair; }

■XHTML記述

<p class="sample2">マウスを乗せて下さい②</p>

■CSS記述

.sample3 { cursor:move; }

■XHTML記述

<p class="sample3">マウスを乗せて下さい③</p>

■CSS記述

.sample4 { cursor:e-resize; }

■XHTML記述

<p class="sample4">マウスを乗せて下さい④</p>

■CSS記述

.sample5 { cursor:ne-resize; }

■XHTML記述

<p class="sample5">マウスを乗せて下さい⑤</p>

■CSS記述

.sample6 { cursor:nw-resize; }

■XHTML記述

<p class="sample6">マウスを乗せて下さい⑥</p>

■CSS記述

.sample7 { cursor:n-resize; }

■XHTML記述

<p class="sample7">マウスを乗せて下さい⑦</p>

■CSS記述

.sample8 { cursor:text; }

■XHTML記述

<p class="sample8">マウスを乗せて下さい⑧</p>

■CSS記述

.sample9 { cursor:wait; }

■XHTML記述

<p class="sample9">マウスを乗せて下さい⑨</p>

■CSS記述

.sample10 { cursor:help; }

■XHTML記述

<p class="sample10">マウスを乗せて下さい⑩</p>