zoukankan      html  css  js  c++  java
  • xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

    1

    1

    cursor CSS属性定义鼠标指针悬浮在元素上时的外观。

    https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor

    概述

    cursor CSS属性定义鼠标指针悬浮在元素上时的外观。

    初始值 auto
    适用元素 all elements
    是否是继承属性 yes
    适用媒体 visual, interactive
    计算值 as specified, but with URIs made absolute
    是否适用于 CSS 动画
    正规顺序 the unique non-ambiguous order defined by the formal grammar

    语法

    如何阅读 CSS 语法。

    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 ] ]
    

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

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

    类型CSS值 描述
    General auto  

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

    default default.gif 默认指针,通常是箭头。
    none   无指针被渲染
    链接及状态 context-menu context-menu.png 指针下有可用内容目录。只有windows中的IE 10有效。
    help help.gif 指示帮助
    pointer pointer.gif 悬浮于连接上时,通常为手
    progress progress.gif 程序后台繁忙,用户仍可交互 (与wait不同).
    wait wait.gif 程序繁忙(沙漏或表)
    选择 cell cell.gif 指示单元格可被选中
    crosshair crosshair.gif 交叉指针,通常指示位图中的框选
    text text.gif 指示文字可被选中
    vertical-text vertical-text.gif 指示垂直文字课被选中
    拖拽 alias alias.gif 复制或快捷方式将要被创建
    copy copy.gif 指示可复制
    move move.gif 被悬浮的物体可被移动
    no-drop no-drop.gif当前位置不能扔下
    bug 275173Windows中 "no-drop 与not-allowed相同".
    not-allowed not-allowed.gif 不能执行
    重设大小及滚动 all-scroll all-scroll.gif 元素可任意方向滚动 (平移).
    bug 275174Windows中, "all-scroll 与 move相同".
    col-resize col-resize.gif 元素可被重设宽度。通常被渲染为中间有一条竖线分割的左右两个箭头
    row-resize row-resize.gif

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

    n-resize Example of a resize towards the top cursor 某条边将被移动。例如元素盒的东南角被移动时使用se-resize
    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 指示双向重新设置大小
    ns-resize 6-resize.gif
    nesw-resize 1-resize.gif
    nwse-resize 4-resize.gif
    缩放 zoom-in zoom-in.gif

    指示可被放大或缩小

    zoom-out zoom-out.gif
    Mozilla特定关键字
    Grab -moz-grab grab.gif 元素可被抓起

    不推荐在公开网页上使用这些指针。

    使用自定图片指针会提供更好的浏览器兼容性

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

    规范

    规范状态备注
    CSS Basic User Interface Module Level 3
    cursor
    Candidate Recommendation 增加了一些关键字,位置语法及url()
    CSS Level 2 (Revision 1)
    cursor
    Recommendation 首次定义

    浏览器兼容性

    FeatureChrome (WebKit)Firefox (Gecko)Internet ExplorerOperaSafari
    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) 未实现 未实现 4.0 未实现 未实现
    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 未实现 3.0
    Positioning syntax for url() values  ? (Yes) 未实现 ? ?
    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] 未实现 10.6 [1] 3.0 [2]
    none 5.0 (533) 3.0 (1.9) 9.0 未实现 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- 未实现 11.6 3.0 -webkit-

    [1] Windows中的Mozilla和WebKit不适用context-menu , Opera中可用。
    [2] alias, cell, copy, none 在Windows Safari不适用, Mac中可用。

    参见

    1

    1

    1

    1

    1

    1

    1

    1

    1

    1

    1

    1

    1

  • 相关阅读:
    oracle sql 汉字在库中占的字节数
    面试题:反转单词顺序
    面试题:平衡二叉树
    面试题:二叉树的深度
    面试题:二叉树的下一个节点
    面试题:数字在排序数组中出现的次数
    面试题:把数组排成最小的数
    面试题:二叉树与双向搜索树
    面试题:序列化二叉树
    面试题:字符串的全排列
  • 原文地址:https://www.cnblogs.com/xgqfrms/p/5515714.html
Copyright © 2011-2022 走看看