English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSSカーソル属性は、マウスが特定のエリアやウェブページのリンクに移動したときにカーソルの種類（つまりマウスカーソル）を定義するために使用されます。
ブラウザは通常、ウェブページのどの空白部分にもマウスカーソルを表示し、リンクやクリック可能なアイテムには手袋の手を表示し、テキストやテキストフィールドには編集カーソルを表示します。CSSを使用して、これらの属性を再定義してさまざまなカーソルを表示できます。
h1 {
cursor: move;
}
p {
cursor: text;
}テストを見て‹/›以下に、大多数のブラウザが受け入れる異なるカーソルを示します。マウスカーソルを「TEST」リンクの上に置いて、カーソルを表示します。
| 表示 | 値 | 例 | 表示 |
|---|---|---|---|
| default | a:hover{cursor:default;} | テスト | |
| pointer | a:hover{cursor:pointer;} | テスト | |
| text | a:hover{cursor:text;} | テスト | |
| wait | a:hover{cursor:wait;} | テスト | |
| help | a:hover{cursor:help;} | テスト | |
| progress | a:hover{cursor:progress;} | テスト | |
| crosshair | a:hover{cursor:crosshair;} | テスト | |
| move | a:hover{cursor:move;} | テスト | |
| url() | a:hover{cursor:url("custom.cur"), default;} | テスト |
表示もっとカーソル»
完全にカスタムのカーソルも持つことができます。
cursor属性は、ユーザー定義のカーソル値のカンマで区切られたリストを処理し、一般的なカーソル。最初のカーソルが指定が間違っているか見つからない場合、カンマで区切られたリストの次のカーソルを使用し、これを続けて、利用可能なカーソルが見つかるまで続けます。
ユーザー定義のカーソルが有効でないか、ブラウザがサポートしていない場合、リストの最後に定義されている一般的なカーソルが使用されます。
ヒント：カーソルに使用できる標準フォーマットは .cur フォーマットです。ただし、オンラインで無料で提供されている画像変換器ソフトウェアを使用して、.jpg や .gif などの画像を .cur フォーマットに変換することができます。
a {
cursor: url("custom.gif"), url("custom.cur"), default;
}テストを見て‹/›上記の例では、custom.gif、custom.cur はカスタムカーソルファイルで、サーバー空間にアップロードされています。また、default は一般的なカーソルで、カスタムカーソルが失われたり、ブラウザがそれをサポートしない場合に、この一般的なカーソルが使用されます。
警告：カスタムカーソルを宣言する場合、リストの最後に定義する必要があります一般的なカーソルそれ以外の場合、カスタムカーソルは正しく表示されません。
これはカスタムカーソルの現場デモです。
注意： IE9およびより古いバージョンでは、.cur 静的カーソルと .ani アニメーションカーソルの URL 値のみをサポートしています。しかし、Firefox、Chrome、Safari ブラウザなどのブラウザは .cur、.png、.gif、.jpg をサポートしていますが、.ani をサポートしていません。