zoukankan      html  css  js  c++  java
  • 使用自定义的鼠标图标 --- cursor url

    前段时间在项目中遇到过 自定义鼠标图标 这一需求。由于一般我们用的鼠标样式大都是固定的几种,而 自定义鼠标图标 不是很常用到,所以对这一小知识点进行总结,以防忘记。

    自定义鼠标图标

    自定义鼠标图标 即 css cursor url的使用。
    css cursor url的用法格式:
    css:{cursor:url("图标路径"),auot};
    //IE,FF,chrome浏览器都可以

    示例代码:

     <style type="text/css">
            .btn{
                cursor: url("./img/pointer.jpg"),auto;
            }
    </style>

    解析:前面的url是自定义鼠标图标的路径,可以为相对/绝对路径。第二个参数是css标准的cursor样式。可换成其他属性(如pointer/default/等)

    注意:w3school推荐第二个参数必须定义一个普通的光标,以防止url定义的光标有备用选项。另外,IE下第二个参数可以省略。

    自定义鼠标图标,需要注意以下几点
    • 图标的格式

    IE支持cur,ani,ico这三种格式,FF支持bmp,gif,jpg,cur,ico这几种格式,不支持ani格式,也不支持gif动画格式,因此一般将url引用的图标存为icocur格式比较好。

    • 图标的大小

    鼠标图标的尺寸推荐32*32,否则可能出现大小不一致问题。

    附上cursor属性值

    描述
    url 需使用的自定义光标的URL。(注释:请在此列表的末端一定一种普通的光标,以防没有由URL定义的可用光标。)
    default 默认光标(通常是一个箭头)
    auto 默认。浏览器设置的光标
    crosshair 光标呈现十字线
    pointer 光标呈现为只是链接的指针(一只手)
    move 此光标只是某对象可以被移动
    e-resize 此光标指示就行框的边缘可以被向右(东)移动
    ne-resize 此光标指示就行框的边缘可以被向上以及向右移动(北/东)
    nw-resize 此光标指示矩形框的边缘可被向上及向左移动(北/西)。
    n-resize 此光标指示矩形框的边缘可被向上(北)移动。
    se-resize 此光标指示矩形框的边缘可被向下及向右移动(南/东)。
    sw-resize 此光标指示矩形框的边缘可被向下及向左移动(南/西)。
    s-resize 此光标指示矩形框的边缘可被向下移动(北/西)。
    w-resize 此光标指示矩形框的边缘可被向左移动(西)。
    text 此光标指示文本
    wait 此光标指示程序正忙(通常一直表或者沙漏)
    help 此光标指示可用的帮助(通常是一个问号或气球)

    本文转载于猿2048:使用自定义的鼠标图标 --- cursor url

  • 相关阅读:
    SCAU 9504 面试
    SCAU 9503 懒人选座位
    SCAU 8628 相亲
    SCAU 10691 ACM 光环
    SCAU 8626 原子量计数
    SCAU 10674 等差对
    HDU ACM 1048 The Hardest Problem Ever (水题)
    SCAU 9502 ARDF
    SCAU 10686 DeathGod不知道的事情
    SCAU 8629 热身游戏(高精度)
  • 原文地址:https://www.cnblogs.com/10manongit/p/12824432.html
Copyright © 2011-2022 走看看