マウスカーソルの形を変更できるcursorプロパティ
cursor
マウスカーソルの形を変更できます。指定した要素にマウスカーソルが入ると、変更した形状で表示されます。
ただし、ユーザー環境により表示されるものが違ってきます。かといって、意味としては同じにとれるアイコンなので、違うものが表示されるからといって特に意識する必要はないでしょう。
注意点としては、むやみに変更しないということです。例えば、リンク先がないのに「pointer(リンクを示すカーソル)」を指定したり、要素を移動できないのに「move(ドラッグできることを示すカーソル)」を指定したりなどです。
基本的には、このプロパティを指定する必要は、ほとんどありません。
基本データ
| 構文 | セレクタ{cursor:値;} |
|---|---|
| 継承 | × |
| 値 |
|
| 効果 | マウスカーソルを変更できる |
| 初期値 | 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':'【値】'});有限会社タグパンダ
喜安 亮介
TechTargetジャパン
リッチクライアント & 帳票 フォーラム 新着記事
- 次のモバイルアプリはどのフレームワークで作る? (2012/5/24)
スマホアプリの開発を容易にするJavaScriptのフレームワークが続々と増えている。それぞれの良さや仕組み、何がどこまでできるのかを徹底解剖する - 「LESS&専用エディター」でCSSをシンプルに書こう (2012/5/23)
「LESS」はCSS初心者に向けた、シンプルなライブラリだ。「LESS」で、変数などのプログラミングの基礎的な考え方もCSSで学ぼう - 学校が世界一のデジタル環境になったら (2012/5/18)
授業はアーカイブに蓄積され、家からも見られる。家族が授業テーマのアイデアを出す。そんな姿が実現されるかもしれない - 1000万ドル調達も夢じゃないクラウドファウンディング (2012/5/15)
クラウドファンディングは、寄付型でも投資型でもない「購入型」が主流。商品を“開発する前に販売”して開発費用を集める逆転のシステムだ
|
|
@IT 新着記事
キャリアアップ
スポンサーからのお知らせ
- - PR -
イベントカレンダー
お勧め求人情報
転職/派遣情報を探す
**先週の人気講座ランキング**
〜 Android編 〜
ホワイトペーパー(TechTargetジャパン)
ソリューションFLASH

