CSS教程
CSS教程
    • 请登录查看
    阅读(2995)

    css鼠标样式语法及20种可选值（属性）

    最后一次修改 2017年08月03日

    我们对Windows各种各样的鼠标样式都不陌生，当鼠标移动到不同的地方时，当鼠标执行不同的功能时，当系统处于不同的状态时，都会使鼠标的形状发生变化。而在网页上往往只有当鼠标在超级链接上时才出现一个手形，在其它地方似乎没有什么变化，同充满动感的网页显得不怎么和谐。这里教大家用CSS来定义20种种鼠标样式形状。在CSS中，使用cursor属性来定义鼠标的样式。


    用css控制鼠标样式的语法如下:

    <span style="cursor:*">文本或其它页面元素</span>

    把 * 换成如下20个可选值的一种：

    cursor属性取值如下，默认值为default。大家可能会说，cursor属性值这么多，怎么记呀？其实大家不用担心，在实际开发中，我们一般只用到“default”和“pointer”这两个属性值，其他的一般都很少用得上。如果实在没办法还需要其他的，那就回来查这种表就行了。


    crosshair;


    十字准心

    The cursor render as a crosshair
    游标表现为十字准线

    cursor: pointer; 
    cursor: hand;
    写两个是为了照顾IE5，它只认hand。

     

    手

    The cursor render as a pointer (a hand) that indicates a link
    游标以暗示(手指)的形式来表明有一个连接

    cursor: wait;

     

    等待/沙漏

    The cursor indicates that the program is busy (often a watch or an hourglass)
    游标暗示当前程序正忙(一般为一块表或是一个沙漏)

    cursor: help;

     

    帮助

    The cursor indicates that help is available (often a question mark or a balloon)
    游标暗示当前位置可得到帮助(一般为问号或是气球)

    cursor: no-drop;

     

    无法释放

    cursor: no-drop;

    cursor: text;

     

    文字/编辑

    The cursor indicates text
    游标暗示当前所处位置为文字内容

    cursor: move;

     

    可移动对象

    The cursor indicates something that should be moved
    游标暗示一些东西应该被移动

    cursor: n-resize;

     

    向上改变大小(North)

    The cursor indicates that an edge of a box is to be moved up (north)
    边缘可向上移动(北)

    cursor: s-resize;

     

    向下改变大小(South)

    The cursor indicates that an edge of a box is to be moved down (south)
    边缘可向下方移动(南)

    cursor: e-resize;

     

    向右改变大小(East)

    The cursor indicates that an edge of a box is to be moved right (east)
    box边缘可向右(东)边移动

    cursor: w-resize;

    向左改变大小(West)

    The cursor indicates that an edge of a box is to be moved left (west)
    边缘可向左移动(西)

    cursor: ne-resize;

     

    向上右改变大小(North East)

    The cursor indicates that an edge of a box is to be moved up and right (north/east)
    游标暗示box的边缘可向右上方移动(东北方向)

    cursor: nw-resize;

     

    向上左改变大小(North West)

    The cursor indicates that an edge of a box is to be moved up and left (north/west)
    边缘可向左上方移动(西北)

    cursor: se-resize;

     

    向下右改变大小(South East)

    The cursor indicates that an edge of a box is to be moved down and right (south/east)
    边缘可向右下方移动(东南)

    cursor: sw-resize;

     

    向下左改变大小(South West)

    The cursor indicates that an edge of a box is to be moved down and left (south/west)
    边缘可向左下方移动(西南)

    cursor: auto;

     

    自动

    The browser sets a cursor
    浏览器设置一个游标

    cursor:not-allowed;

     

    禁止

    cursor:not-allowed;

    cursor: progress;

     

    处理中

    cursor: progress;

    cursor: default;

     

    系统默认

    The default cursor (often an arrow)
    默认的游标状态（通常为一个箭头）

    cursor: url(' # ');
    # = 光标文件地址      (注意文件格式必须为：.cur 或 .ani)。

     

    用户自定义（可用动画）

    The url of a custom cursor to be used.
    自定义游标的url位置

    Note: Always define a generic cursor at the end of the list in case none of the url-defined cursors can be used
    注意：在定义完自定义的游标之后在末尾加上一般性的游标，以防那些url所定义的游标不能使用


    cursor的pointer与hand区别

    cursor:hand 与 cursor:pointer 的效果是一样，都像手形光标。那为什么有两个呢，这两个有什么区别呢？

    用浏览器测试得出以下结论：
    cursor:hand ：IE完全支持。但是在firefox是不支持的，没有效果。
    cursor:pointer ：是CSS2.0的标准。所以firefox是支持的，但是IE5.0既之前版本不支持。IE6开始支持。
    所以为了兼容各个主流浏览器，尽量使用cursor:pointer，而不要使用cursor:hand。

    实例：

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>cursor属性</title>    <style type="text/css">        div
        {            width:100px;            height:30px;            line-height:30px;            text-align:center;            border:1px solid #CCCCCC;            background-color: #40B20F;            color:white;            font-size:14px;            font-weight:bold;
        }        #div_default{cursor:default;}        #div_pointer{cursor:pointer;}    </style></head><body>    <div id="div_default">鼠标默认样式</div>    <div id="div_pointer">鼠标手状样式</div></body></html>
    在浏览器预览效果如下：

    css鼠标样式

    CSS Cursor鼠标指针样式兼容性参考表

    下面分享一个鼠标指针样式兼容性在线参考表，黑色图标：表示该属性兼容此浏览器。灰色图标：表示该属性不兼容此浏览器。

    CSS Cursor兼容表





    我们对Windows各种各样的鼠标样式都不陌生，当鼠标移动到不同的地方时，当鼠标执行不同的功能时，当系统处于不同的状态时，都会使鼠标的形状发生变化。而在网页上往往只有当鼠标在超级链接上时才出现一个手形，在其它地方似乎没有什么变化，同充满动感的网页显得不怎么和谐。这里教大家用CSS来定义20种种鼠标样式形状。在CSS中，使用cursor属性来定义鼠标的样式。


    用css控制鼠标样式的语法如下:

    <span style="cursor:*">文本或其它页面元素</span>

    把 * 换成如下20个可选值的一种：

    cursor属性取值如下，默认值为default。大家可能会说，cursor属性值这么多，怎么记呀？其实大家不用担心，在实际开发中，我们一般只用到“default”和“pointer”这两个属性值，其他的一般都很少用得上。如果实在没办法还需要其他的，那就回来查这种表就行了。


    crosshair;


    十字准心

    The cursor render as a crosshair
    游标表现为十字准线

    cursor: pointer; 
    cursor: hand;
    写两个是为了照顾IE5，它只认hand。

     

    手

    The cursor render as a pointer (a hand) that indicates a link
    游标以暗示(手指)的形式来表明有一个连接

    cursor: wait;

     

    等待/沙漏

    The cursor indicates that the program is busy (often a watch or an hourglass)
    游标暗示当前程序正忙(一般为一块表或是一个沙漏)

    cursor: help;

     

    帮助

    The cursor indicates that help is available (often a question mark or a balloon)
    游标暗示当前位置可得到帮助(一般为问号或是气球)

    cursor: no-drop;

     

    无法释放

    cursor: no-drop;

    cursor: text;

     

    文字/编辑

    The cursor indicates text
    游标暗示当前所处位置为文字内容

    cursor: move;

     

    可移动对象

    The cursor indicates something that should be moved
    游标暗示一些东西应该被移动

    cursor: n-resize;

     

    向上改变大小(North)

    The cursor indicates that an edge of a box is to be moved up (north)
    边缘可向上移动(北)

    cursor: s-resize;

     

    向下改变大小(South)

    The cursor indicates that an edge of a box is to be moved down (south)
    边缘可向下方移动(南)

    cursor: e-resize;

     

    向右改变大小(East)

    The cursor indicates that an edge of a box is to be moved right (east)
    box边缘可向右(东)边移动

    cursor: w-resize;

    向左改变大小(West)

    The cursor indicates that an edge of a box is to be moved left (west)
    边缘可向左移动(西)

    cursor: ne-resize;

     

    向上右改变大小(North East)

    The cursor indicates that an edge of a box is to be moved up and right (north/east)
    游标暗示box的边缘可向右上方移动(东北方向)

    cursor: nw-resize;

     

    向上左改变大小(North West)

    The cursor indicates that an edge of a box is to be moved up and left (north/west)
    边缘可向左上方移动(西北)

    cursor: se-resize;

     

    向下右改变大小(South East)

    The cursor indicates that an edge of a box is to be moved down and right (south/east)
    边缘可向右下方移动(东南)

    cursor: sw-resize;

     

    向下左改变大小(South West)

    The cursor indicates that an edge of a box is to be moved down and left (south/west)
    边缘可向左下方移动(西南)

    cursor: auto;

     

    自动

    The browser sets a cursor
    浏览器设置一个游标

    cursor:not-allowed;

     

    禁止

    cursor:not-allowed;

    cursor: progress;

     

    处理中

    cursor: progress;

    cursor: default;

     

    系统默认

    The default cursor (often an arrow)
    默认的游标状态（通常为一个箭头）

    cursor: url(' # ');
    # = 光标文件地址      (注意文件格式必须为：.cur 或 .ani)。

     

    用户自定义（可用动画）

    The url of a custom cursor to be used.
    自定义游标的url位置

    Note: Always define a generic cursor at the end of the list in case none of the url-defined cursors can be used
    注意：在定义完自定义的游标之后在末尾加上一般性的游标，以防那些url所定义的游标不能使用


    cursor的pointer与hand区别

    cursor:hand 与 cursor:pointer 的效果是一样，都像手形光标。那为什么有两个呢，这两个有什么区别呢？

    用浏览器测试得出以下结论：
    cursor:hand ：IE完全支持。但是在firefox是不支持的，没有效果。
    cursor:pointer ：是CSS2.0的标准。所以firefox是支持的，但是IE5.0既之前版本不支持。IE6开始支持。
    所以为了兼容各个主流浏览器，尽量使用cursor:pointer，而不要使用cursor:hand。

    实例：

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>cursor属性</title>    <style type="text/css">        div
        {            width:100px;            height:30px;            line-height:30px;            text-align:center;            border:1px solid #CCCCCC;            background-color: #40B20F;            color:white;            font-size:14px;            font-weight:bold;
        }        #div_default{cursor:default;}        #div_pointer{cursor:pointer;}    </style></head><body>    <div id="div_default">鼠标默认样式</div>    <div id="div_pointer">鼠标手状样式</div></body></html>
    在浏览器预览效果如下：

    css鼠标样式

    CSS Cursor鼠标指针样式兼容性参考表

    下面分享一个鼠标指针样式兼容性在线参考表，黑色图标：表示该属性兼容此浏览器。灰色图标：表示该属性不兼容此浏览器。

    CSS Cursor兼容表





    ← HTML引入CSS的常见方法及解析
    没有了 →
    提交