• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • cursor

    cursor CSS 属性设置光标的类型(如果有),在鼠标指针悬停在元素上时显示相应样式。

    示例

    /* 仅关键字 */
    cursor: pointer;
    cursor: auto;
    
    /* 使用url并提供一个关键字值作为回退机制 */
    cursor: url(hand.cur), pointer;
    
    /* url和xy的坐标偏移值,最后提供一个关键字值作为回退机制 */
    cursor:  url(cursor1.png) 4 12, auto;
    cursor:  url(cursor2.png) 2 2, pointer;
    
    /* 全局属性 */
    cursor: inherit;
    cursor: initial;
    cursor: unset;
    
    

    cursor属性为零个或多个<url>值,最后必填一个关键字值,它们之间用逗号分隔。<url>指向一个图像文件。浏览器将尝试加载指定的第一个图像,如果无法加载则返回下一个图像,如果无法加载图像或未指定图像,则返回关键字值。

    每个<url>后面都可选跟一对空格分隔的数字<x><y>表示偏移。这些将设置光标相对于图像左上角的点。

    例如,下面的例子使用<url>值指定两个图像,为第二个图像提供<x><y>坐标,如果两个图像都无法加载,则返回progress关键字值:

    cursor: url(one.svg), url(two.svg) 5 5, progress;

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持cursor

    语法:

    cursor:[<url>[<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]

    取值

    • <url>url(…)或者逗号分隔的url(…), url(…),…,指向图片文件。用大于一个<url>值提供后备,以防某些指针图片类型不被支持。最后必须提供一个非URL后备值。详情参见cursor属性中使用URL值。
    • <x><y>可选 x,y坐标。无单位数字。
    • 关键字值:见下表

    鼠标悬浮于值上测试效果:

    类型CSS值描述
    Generalauto

    浏览器根据当前内容决定指针样式
    例如当是内容是文字时使用text样式

    defaultdefault.gif默认指针,通常是箭头。
    none无指针被渲染
    链接及状态context-menucontext-menu.png指针下有可用内容目录。
    helphelp.gif指示帮助
    pointerpointer.gif悬浮于连接上时,通常为手
    progressprogress.gif程序后台繁忙,用户仍可交互(与wait相反).
    waitwait.gif程序繁忙,用户不可交互(与progress相反).图标一般为沙漏或者表。
    选择cellcell.gif指示单元格可被选中
    crosshaircrosshair.gif交叉指针,通常指示位图中的框选
    texttext.gif指示文字可被选中
    vertical-textvertical-text.gif指示垂直文字可被选中
    拖拽aliasalias.gif复制或快捷方式将要被创建
    copycopy.gif指示可复制
    movemove.gif被悬浮的物体可被移动
    no-dropno-drop.gif当前位置不能扔下
    bug 275173Windows或Mac OS X中"no-drop 与not-allowed相同".
    not-allowednot-allowed.gif不能执行
    grabgrab.gif

    可抓取

    译者注:grab和grabbing在比较后期才被支持,见浏览器兼容表

    grabbinggrabbing.gif抓取中
    重设大小及滚动all-scrollall-scroll.gif元素可任意方向滚动(平移).
    bug 275174Windows中,"all-scrollmove相同".
    col-resizecol-resize.gif元素可被重设宽度。通常被渲染为中间有一条竖线分割的左右两个箭头
    row-resizerow-resize.gif

    元素可被重设高度。通常被渲染为中间有一条横线分割的上下两个箭头

    n-resizeExample of a resize towards the top cursor某条边将被移动。例如元素盒的东南角被移动时使用se-resize
    e-resizeExample of a resize towards the right cursor
    s-resizeExample of a resize towards the bottom cursor
    w-resizeExample of a resize towards the left cursor
    ne-resizeExample of a resize towards the top-right corner cursor
    nw-resizeExample of a resize towards the top-left corner cursor
    se-resizeExample of a resize towards the bottom-right corner cursor
    sw-resizeExample of a resize towards the bottom-left corner cursor
    ew-resize3-resize.gif指示双向重新设置大小
    ns-resize6-resize.gif
    nesw-resize1-resize.gif
    nwse-resize4-resize.gif
    缩放zoom-inzoom-in.gif

    指示可被放大或缩小

    zoom-outzoom-out.gif

    例子

    .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 }
    

    上篇:outline-offset

    下篇:zoom