マウスカーソルの形を変更できるcursorプロパティ
cursor

 マウスカーソルの形を変更できます。指定した要素にマウスカーソルが入ると、変更した形状で表示されます。

 ただし、ユーザー環境により表示されるものが違ってきます。かといって、意味としては同じにとれるアイコンなので、違うものが表示されるからといって特に意識する必要はないでしょう。

 注意点としては、むやみに変更しないということです。例えば、リンク先がないのに「pointer(リンクを示すカーソル)」を指定したり、要素を移動できないのに「move(ドラッグできることを示すカーソル)」を指定したりなどです。

 基本的には、このプロパティを指定する必要は、ほとんどありません。

基本データ

構文 セレクタ{cursor:値;}
継承 ×
個々のプロパティの値の指定法による
 
キーワードを使って指定する場合
auto、default、pointer、crosshair、move,e-resize、ne-resize、nw-resize、n-resize、se-resize、s-resize、w-resize、text、wait、progress、help、url
親から継承させる場合
inherit
効果 マウスカーソルを変更できる
初期値 auto
適用箇所 すべての要素

ほげほげですね。

p { cursor: pointer;}

動作Webブラウザ

Internet Explorer 5.5、6.0、7.0、8.0以上
Firefox 全バージョン
Safari全バージョン
Opera全バージョン
Chrome全バージョン
iPhone/iPad対応していない

標準JavaScriptによるDOMでの参照方法

[window.]document.getElementById("【ID属性値】").style.cursor

jQueryを使った参照方法

$('【セレクタ】').css('cursor','【値】');
$('【セレクタ】').css({'cursor':'【値】'});

有限会社タグパンダ
喜安 亮介




HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

デザインハック 記事ランキング

本日 月間