Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship




    The cursor CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.

    • 初始值 auto
    • 适用元素 all elements
    • 可继承 yes
    • 适用媒体 visual, interactive
    • 计算值 as specified, but with relative URI converted into absolute URI
    • 可动画
    • Canonical order the unique non-ambiguous order defined by the formal grammar


    Formal syntax: [ [ <uri> [<x> <y>]?,]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ]


    A url(…) or a comma separated list url(…), url(…), …, pointing to an image file. More than one <uri> may be provided as fallback, in case some cursor image types are not supported. A non-URL fallback (one ore more of the other values) must be at the end of the fallback list. See Using URL values for the cursor property for more details.
    <x> <y>
    Optional x- and y-coordinates. Two unit-less numbers.
    Keyword values

    Move mouse over value for testing:

    Category CSS value   Description
    General auto   The browser determines the cursor to display based on the current context.
    E.g. equivalent to text when hovering text.
    default default.gif Default cursor, typically an arrow.
    none   No cursor is rendered
    Links & status context-menu context-menu.png A context menu is available under the cursor.
    In Gecko/Firefox not implemented on Windows, bug 258960 WONTFIX.
    help help.gif Indicating help is available.
    pointer pointer.gif E.g. used when hovering over links, typically a hand.
    progress progress.gif The program is busy in the background but the user can still interact with the interface (unlike for wait).
    wait wait.gif The program is busy (sometimes an hourglass or a watch).
    Selection cell cell.gif Indicating that cells can be selected.
    crosshair crosshair.gif Cross cursor, often used to indicate selection in a bitmap.
    text text.gif Indicating text can be selected, typically an I-beam.
    vertical-text vertical-text.gif Indicating that vertical text can be selected, typically a sideways I-beam.
    Drag and drop alias alias.gif Indicating an alias or shortcut is to be created.
    copy copy.gif Indicating that something can be copied.
    move move.gif The hovered object may be moved.
    no-drop no-drop.gifCursor showing that a drop is not allowed at the current location.
    bug 275173 on Windows, "no-drop is the same as not-allowed".
    not-allowed not-allowed.gif Cursor showing that something cannot be done.
    Resize & scrolling all-scroll all-scroll.gif Cursor showing that something can be scrolled in any direction (panned).
    bug 275174 on Windows, "all-scroll is the same as move".
    col-resize col-resize.gif The item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating.
    row-resize row-resize.gif The item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.
    n-resize Example of a resize towards the top cursor Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
    e-resize Example of a resize towards the right cursor
    s-resize Example of a resize towards the bottom cursor
    w-resize Example of a resize towards the left cursor
    ne-resize Example of a resize towards the top-right corner cursor
    nw-resize Example of a resize towards the top-left corner cursor
    se-resize Example of a resize towards the bottom-right corner cursor
    sw-resize Example of a resize towards the bottom-left corner cursor
    ew-resize 3-resize.gif Indicates a bidirectional resize cursor.
    ns-resize 6-resize.gif
    nesw-resize 1-resize.gif
    nwse-resize 4-resize.gif
    Zoom zoom-in zoom-in.gif

    Indicates that something can be zoomed (magnified) in or out.

    zoom-out zoom-out.gif
    Mozilla-specific keyords
    Grab -moz-grab grab.gif An element can be grabbed.

    This cursors are not recommended for use on public web pages.

    Use of custom image cursors may provide better cross browser compatibility.

    -moz-grabbing grabbing.gif An element is currently being grabbed.



    .foo { cursor: crosshair; }
    /* use prefixed-value if "zoom-in" isn't supported */
    .bar { cursor: -webkit-zoom-in;  cursor: -moz-zoom-in;  cursor: zoom-in; } 
    /* standard cursor value as fallback for url() must be provided (doesn't work without) */
    .baz { cursor: url(hyper.cur), auto }


    Specification Status Comment
    CSS Basic User Interface Module Level 3 Working Draft Add some keywords and the positioning syntax for url().
    CSS Level 2 (Revision 1) Recommendation Initial definition.

    Browser compatibility

    Feature Chrome (WebKit) Firefox (Gecko) Internet Explorer Opera Safari
    auto, crosshair, default, move, text, wait, help, n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize 1.0 1.0 (1.0) 4.0 7.0 1.2
    hand (just use pointer for this purpose) Not supported Not supported 4.0 Not supported Not supported
    pointer, progress 1.0 1.0 (1.0|1.7) 6.0 7.x 1.2 | 3.0
    url() - See Using URL values 1.0 (523) 1.5 (1.8)
    On MacOs 4.0 (2.0).
    6.0 Not supported 3.0
    Positioning syntax for url() values ? (Yes) Not supported ? ?
    not-allowed, no-drop, vertical-text, all-scroll, col-resize, row-resize 1.0 (522) 1.5 (1.8) 6.0 10.6 3.0
    alias, cell, copy, ew-resize, ns-resize, nesw-resize, nwse-resize, context-menu 1.0 (522 )[1] 1.5 (1.8 )[1] Not supported 10.6 [1] 3.0 [2]
    none 5.0 (533) 3.0 (1.9) 9.0 Not supported 5.0 [2]
    inherit 1.0 1.0 8.0 9.0 1.2
    zoom-in, zoom-out 1.0 (522) -webkit- 1.0 (1.4) -moz- Not supported 11.6 3.0 -webkit-

    [1] Mozilla and WebKit don't apply context-menu on Windows, Opera does.
    [2] Safari doesn't apply alias, cell, copy, none on Windows, it does on Mac.

    See also


    此页面的贡献者有: teoli
    最后编辑者: teoli,