マウスカーソル

'cursor' プロパティー (CSS)

仕様書

キーワード

[5] cursor 属性の鍵語による指定:

説明状態出典
aliasW3C 勧告候補CSS 3
-moz-alias
all-scrollW3C 勧告候補[WinIE 6], CSS 3
auto自動W3C 勧告CSS 2
cellW3C 勧告候補CSS 3
col-resizeW3C 勧告候補[WinIE 6], CSS 3
context-menuW3C 勧告候補CSS 3
copyW3C 勧告候補CSS 3
crosshairW3C 勧告CSS 2
defaultW3C 勧告CSS 2
e-resizeW3C 勧告CSS 2
ew-resizeW3C 勧告候補CSS 3
-moz-grab[Gecko]
-webkit-grab
-moz-grabbing[Gecko]
-webkit-grabbing
hand非標準 → pointer[WinIE]
helpW3C 勧告CSS 2
inherit継承W3C 勧告CSS 2
moveW3C 勧告CSS 2
n-resizeW3C 勧告CSS 2
ne-resizeW3C 勧告CSS 2
nesw-resizeW3C 勧告候補CSS 3
no-dropW3C 勧告候補[WinIE 6], CSS 3
noneW3C 勧告候補CSS 3
not-allowedW3C 勧告候補[WinIE 6], CSS 3
ns-resizeW3C 勧告候補CSS 3
nw-resizeW3C 勧告CSS 2
nwse-resizeW3C 勧告候補CSS 3
pointerW3C 勧告CSS 2
progressW3C 勧告候補[WinIE 6], CSS 2.1
row-resizeW3C 勧告候補[WinIE 6], CSS 3
s-resizeW3C 勧告CSS 2
se-resizeW3C 勧告CSS 2
sw-resizeW3C 勧告CSS 2
textW3C 勧告CSS 2
vertical-textW3C 勧告候補[WinIE 6], CSS 3
w-resizeW3C 勧告CSS 2
waitW3C 勧告CSS 2
-moz-zoom-in[Gecko]
-webkit-zoom-in
-moz-zoom-out[Gecko]
-webkit-zoom-out

[48] Firefoxalias に対応していますが -moz-alias には対応していないようです。

[49] Firefox-moz-zoom-in-moz-zoom-out に対応していますが zoom-inzoom-out には対応していないようです。

マウスカーソルの決定

[58] 固定状態では、常に隠さなければなりません Pointer Lock

マウスカーソルの位置

[59] 固定状態が終了すると、開始前の位置でマウスカーソルが復元されます。

固定状態参照。

歴史

[7] この特性CSS 2 で標準化されました。

WinIE の実装とどちらが先?

メモ

[1] 厨房的不思議マーク付けサイト (中高生サイトや同人系サイトが多いと思われ。) で、 HTMLstyle 要素を使って cursor: crosshair とかにしてるところって多いですよねぇ。どうしてあれがいいんだかようわからん...

[4]cursor: handcursor: pointer

[9] Using URL values for the cursor property - MDC http://developer.mozilla.org/ja/docs/Using_URL_values_for_the_cursor_property (名無しさん)

[10] MFSA 2007-04: Spoofing using custom cursor and CSS3 hotspot (2007-02-24 04:08:29 +09:00 版) http://www.mozilla.org/security/announce/2007/mfsa2007-04.html (名無しさん 2007-02-24 03:20:57 +00:00)

[11] Enhance Opera's mouse cursor over text - Lee Harvey's Target Range - by Lee Harvey (2007-03-04 13:30:41 +09:00 版) http://my.opera.com/Lee_Harvey/blog/2007/03/03/enhance-opera-s-mouse-cursor-over-text (名無しさん 2007-03-04 04:34:16 +00:00)

[12] d:id:quaa (2007-03-05 03:42:27 +09:00 版) http://d.hatena.ne.jp/quaa/20070305#p1 (名無しさん 2007-03-04 22:39:08 +00:00)

[13] マイクロソフト セキュリティ アドバイザリ (935423): Windows アニメーション カーソル処理の脆弱性 (2007-04-01 11:15:54 +09:00 版) http://www.microsoft.com/japan/technet/security/advisory/935423.mspx (名無しさん 2007-04-01 02:16:12 +00:00)

[14] 「Windowsアニメーションカーソルの脆弱性」@水無月ばけらのえび日記 (2007-04-01 02:56:20 +09:00 版) http://bakera.jp/hatomaru.aspx/ebi/topic/2833 (名無しさん 2007-04-01 02:17:47 +00:00)

[15] 葉っぱ日記 - 「Windowsアニメーションカーソルの脆弱性」@水無月ばけらのえび日記 (2007-03-30 17:40:40 +09:00 版) http://d.hatena.ne.jp/hasegawayosuke/20070330/p2 (名無しさん 2007-04-01 02:18:07 +00:00)

[16] Bug 302536 – crash [@ nsEventStateManager::UpdateCursor ] when visiting and/or printing a page on www.vdab.be (2007-05-11 20:33:53 +09:00 版) https://bugzilla.mozilla.org/show_bug.cgi?id=302536#c58 (名無しさん 2007-05-11 11:39:33 +00:00)

[17] Styling of area elements (as displayed within referencing image) (L. David Baron <dbaron@...> 著, 2007-05-10 18:21:21 +09:00 版) http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/10563 (名無しさん 2007-05-11 11:42:39 +00:00)

[18] 手元の WinIE 6 では http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20cursor%3A%20%20url()%2C%2C%3B%0D%0A%7D%0D%0A;h=%3Cp%20onclick%3D%22%0D%0A%20%20w%20(this.currentStyle.textDecoration)%3B%0D%0A%22%3EClick%20this%20paragraph%20to%20show%20the%20computed%20(%3F)%20value%20of%20the%20'%3Ccode%3Etext-decoration%3C%2Fcode%3E'%20property.%0D%0A;p=n;x=style-elementクラッシュします。 もっと単純化してもたまに発生しますが、正確な再現条件は不明です。上記の例では手元の環境で確実に発生します。 読点区切りの値のうちの1つに空文字列とみなせるものが含まれていると発生するようです。 (名無しさん)

[19] cursor: url(image) http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20cursor%3A%20url(image)%3B%0A%7D%0A;h=;p=n;x=style-element

CSS 2.1 違反。 (名無しさん)

[20] cursor: url(image), crosshair http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20cursor%3A%20url(image)%2C%20crosshair%3B%0A%7D%0A;h=%3Cp%3EXXXXXXXXXX;p=n;x=style-element

(名無しさん)

[21] cursor: url(image), url(image-404), crosshair http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20cursor%3A%20url(image)%2C%20url(image-404)%2C%20crosshair%3B%0A%7D%0A;h=%3Cp%3EXXXXXXXXXX;p=n;x=style-element

(名無しさん)

[22] >>19-21 Opera 9 は url() にまったく対応していないようで、 宣言ごと無視します。Firefox 2 と WinIE 6 では全部 CSSOM 中に現れます。 (名無しさん)

[23] WinIE 6CSSCSSOM (カオス)

  1. url( が含まれていれば (escape されていてもおk):
    1. 全体の最初が url( で最後が ) なら、 CSSOM に現れる値はそれらを除去したものになる。 例えば http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20cursor%3A%20url(a)%2C%20b%2C%20c)%3B%0D%0A%7D%0D%0A;h=%3Cp%3EXXXXXXXXXX;p=n;x=style-element では a), b, cCSSOM に現れる。
    2. 読点で区切られている値の並びとみなす。
    3. IDENTSTRINGURI は通常通り処理される。
    4. 空白はどこにでも挿入できる。特性値全体の最初や最後のものは捨てられる。 読点の前後のものは CSSOM 上は捨てられない。URI と見なす際に除去される模様 (要検証)。それ以外の途中の空白URI と見なす際にも除去されない模様 (要検証)。
    5. 注釈はどこにでも挿入できる。捨てられる。
    6. 空白注釈を無視して空文字列になると >>19 のクラッシュが発生し得る。
    7. 空白注釈を無視した結果が url( で始まり )] なら、URI としての解釈上は無視する (CSSOM 上はそのまま残る)。 それらが含まれていても、その前や後ろに違うものがあれば、無視しない (例えば a url(b) c はこれ全体が URI とみなされる)。
    8. ;! を除き、おおよそどんな DELIM もそのまま残る。 { もおkだが、宣言構文解析の段階で } との対応がチェックされる (URI として解釈するために読点で分割する段階では対応関係は考慮されない)。
  2. url( が含まれていなければ、 値が1つ指定されたものとみなす。理解できる値でなければ、 宣言ごと無視する。escape の処理などは通常通り行われる。

(名無しさん)

[24] >>23 CSSOM に現れる値は、>>19 のように url() 1つだけの場合には url('image') 的に関数名escape大文字小文字と括弧内の空白escape正規化され、' で括られたものになります。 >>20 も含めてそれ以外の場合の url() は、関数名escape とと括弧内の escape だけを正規化します。 (名無しさん)

[25] cursor: a, url(crosshair) http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20cursor%3A%20a%2C%20url(crosshair)%3B%0D%0A%7D%0D%0A;h=%3Cp%3EXXXXXXXXXX;p=n;x=style-element のように URI としていても、 IDENT の場合のように扱われてしまいます (十字指示子になります)。

(名無しさん)

[26] cursor: cross/**/hair http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20cursor%3A%20cross%2F**%2Fhair%3B%0D%0A%7D%0D%0A;h=%3Cp%3EXXXXXXXXXX;p=n;x=style-element

このように途中に注釈が入っていても WinIE 6 では十字指示子になります。

(名無しさん)

[27] cursor: cross/**/hair http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20cursor%3A%20cross%2F**%2Fhair%3B%0D%0A%7D%0D%0A;h=%3Cp%3EXXXXXXXXXX;p=n;x=style-element

このように途中に注釈が入っていても WinIE 6 では十字指示子になります。

(名無しさん)

[28] 間に何もない読点の連続 http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20cursor%3A%20url(crosshair)%2C%2C%20default%3B%0A%7D%0A;h=%3Cp%3EXXXXXXXXXX;p=n;x=style-element

Firefox 2 は宣言ごと無視します。 (名無しさん)

[29] Firefox 2 では読点, のあとに SPACE 1つに正規化されます。 (名無しさん)

[30] WinIE 6currentStyle で得られるのは実際に使っている値だけのようです。 (名無しさん)

[31] 候補がいくつかあるときにどれが使われるのかはよくわかりません。

http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20cursor%3A%20%20%20url(crosshair)%2C%20e-resize%2C%20n-resize%3B%0D%0A%7D%0D%0A;h=%3Cp%20onclick%3D%22%0D%0A%20%20w%20(this.currentStyle.cursor)%3B%0D%0A%22%3EXXXXXXXXXXX%0D%0A;p=n;x=style-elemente-resize

http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20cursor%3A%20n-resize%2C%20url(crosshair)%2C%20e-resize%3B%0D%0A%7D%0D%0A;h=%3Cp%20onclick%3D%22%0D%0A%20%20w%20(this.currentStyle.cursor)%3B%0D%0A%22%3EXXXXXXXXXXXXXX%0D%0A;p=n;x=style-elementcrosshair (currentStyle も)

http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20cursor%3A%20e-resize%2C%20n-resize%2C%20url(crosshair)%3B%0D%0A%7D%0D%0A;h=%3Cp%20onclick%3D%22%0D%0A%20%20w%20(this.currentStyle.cursor)%3B%0D%0A%22%3EXXXXXXXXXXXXXX%0D%0A;p=n;x=style-elementn-resize

真ん中!?

(名無しさん)

[32] Opera 9 は元々値を1つしか指定できないので currentStyle も面白い結果にはなっていませんね。。。 (名無しさん)

[33] cursor: hand http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20%20cursor%3A%20hand%3B%0A%7D%0A;h=%3Cp%20onclick%3D%22%0A%20%20w%20(this.currentStyle.cursor)%3B%0A%22%3EXXXXXXXXXXXXXX%0A;p=n;x=style-element;i=html-div

(名無しさん)

[34] >>33 WinIE 7 では hand のまま CSSOM に現れます (ちなみに pointer もそのまま)。 Opera 9.27 では pointer として CSSOM に現れます。

Firefox 2 と Safari 3 は未対応。 (名無しさん)

[35] Bug 346690 &#8211; Implement CSS3 CR cursor:none (2008-09-16 07:54:09 +09:00 版) https://bugzilla.mozilla.org/show_bug.cgi?id=346690 (名無しさん)

[36] cursor:auto - how it defined - mozilla.dev.tech.css | Google グループ ( 版) http://groups.google.com/group/mozilla.dev.tech.css/msg/9572cda5f3a60045

[37] User Interface Enhancements ( ( 版)) http://www.w3.org/TR/1999/WD-css3-userint-19990916#cursor

[38] User Interface for CSS3 ( ( 版)) http://www.w3.org/TR/2000/WD-css3-userint-20000216#cursor

[39] CSS3 module: Basic User Interface ( (Tantek Çelik 著, 版)) http://www.w3.org/TR/2002/WD-css3-ui-20020802/#cursor

[40] CSS3 Basic User Interface Module ( (Tantek Çelik 著, 版)) http://www.w3.org/TR/2003/WD-css3-ui-20030703/#cursor

[41] CSS3 Basic User Interface Module ( (Tantek Çelik 著, 版)) http://www.w3.org/TR/2004/CR-css3-ui-20040511/#cursor

[42] CSS Basic User Interface Module Level 3 (CSS3 UI) ( (Tantek Çelik 著, 版)) http://dev.w3.org/csswg/css3-ui/#cursor

[43] NOTE-css-potential-19970819 ( ( 版)) http://www.w3.org/TR/NOTE-css-potential-19970819#elementId=1037557

[44] CSS Basic User Interface Module Level 3 (CSS3 UI) ( (Tantek Çelik 著, 版)) http://www.w3.org/TR/2012/WD-css3-ui-20120117/#cursor

[45] FirefoxChrome も、 URL のあとに座標を指定する構文に対応しています。

[46] ChromeURL が並んだ後にキーワードが来る時、キーワードが未対応のものであっても非妥当になりません。そのキーワードだけ無視されます。 キーワードだけを指定した時や、 Firefox は仕様通り未対応なら無視します。

[47] FirefoxChromehand には対応していません。

[50] >>47 Chrome奇癖モードでのみ hand に対応しています。

[51] WinIE9奇癖モードIE7標準モードIE8標準モードでは hand に対応していますが、 IE9標準モードでは対応していません。

[52] cursor - CSS | MDN ( ( 版)) https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

[53] CSS cursor (CSS3-UI);マウスポインタ - CSS3ウェブブラウザ実装メモ - 血統の森 web実験小屋 ( (momdo 著, 版)) http://momdo.s35.xrea.com/web-html-test/CSS3-memo/ui-cursor.html

[54] Cursor support in DOM 2 compliant browsers ( ( 版)) http://www.gtalbot.org/DHTMLSection/Cursors.html

[2] Re: [css3-ui] file formats for the cursor property (Tab Atkins Jr. 著, 版) https://lists.w3.org/Archives/Public/www-style/2015Mar/0217.html

[3] Re: [css3-ui] file formats for the cursor property (Florian Rivoal 著, 版) https://lists.w3.org/Archives/Public/www-style/2015Mar/0219.html

[8] Re: [css3-ui] file formats for the cursor property (Tantek Çelik 著, 版) https://lists.w3.org/Archives/Public/www-style/2015Mar/0247.html

[55] Note how the SVG currently implemented in browsers is a mix of SVG 1.… · whatwg/html@969c45b ( 版) https://github.com/whatwg/html/commit/969c45b2478d1d2d3be8564ec85dc316a53c8bcf

[56] Using URL values for the cursor property - CSS | MDN ( ()) https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_User_Interface/Using_URL_values_for_the_cursor_property

[57] Cursors: mark <cursor> element deprecated, update other prose (AmeliaBR著, ) https://github.com/w3c/svgwg/commit/1b93678d7b5d94691ad228701c110b46d3997c82

[60] [css-ui-3] Add informative link to HTML about 'cursor' & image maps (frivoal著, ) https://github.com/w3c/csswg-drafts/commit/8493633a0d481082b070563a8a372adc2e554506

[61] Link to CSSUI for the cursor property (dstorey著, ) https://github.com/w3c/svgwg/commit/59d02b120fae356ebfcd2a52a38fe6fe9a54a124

[62] Remove SVGCursorElement... by dstorey · Pull Request #455 · w3c/svgwg () https://github.com/w3c/svgwg/pull/455

[63] Add cursor presentational attribute back in (dstorey著, ) https://github.com/w3c/svgwg/commit/cedeaf84ff90db98d6a6f3eca12617e2bb21eb3c

[64] Remove additional reference to cursor allowing cursor elements (dstorey著, ) https://github.com/w3c/svgwg/commit/6425299dc3b2202da52b554a122779ff708d71dd

[65] Add cursor property description back (dstorey著, ) https://github.com/w3c/svgwg/commit/aa66e6e3e3cd0140767ed45bc2f8a3e24f7bef89

[66] Reference SVG 2 (dstorey著, ) https://github.com/whatwg/html/commit/7069de4fcf2f92295dded520ed5d7275addab2e7

[67] Update SVG dependencies text · Issue #3679 · whatwg/html () https://github.com/whatwg/html/issues/3679

[68] Using URL values for the cursor property - CSS: Cascading Style Sheets | MDN () https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_User_Interface/Using_URL_values_for_the_cursor_property

[69] Remove SVGCursorElement... (dstorey著, ) https://github.com/w3c/svgwg/commit/94eb871d6d802ccce8dbdb8934d4baba58a38c18

[70] Remove SVGCursorElement... by dstorey · Pull Request #455 · w3c/svgwg () https://github.com/w3c/svgwg/pull/455

[71] Add cursor presentational attribute back in (dstorey著, ) https://github.com/w3c/svgwg/commit/cedeaf84ff90db98d6a6f3eca12617e2bb21eb3c

[72] Add cursor property description back (dstorey著, ) https://github.com/w3c/svgwg/commit/aa66e6e3e3cd0140767ed45bc2f8a3e24f7bef89

[73] Update SVG dependencies text · Issue #3679 · whatwg/html () https://github.com/whatwg/html/issues/3679