• CSS中cursor 鼠标指针光标样式(形状)


    在前端开发中,我们经常需要对对象鼠标指针光标进行控制,比如鼠标经过超链接时变成手指形状。在这里整理一下cursor鼠标指针光标样式的知识,记录与方便以后查找。  

    常用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 此光标指示可用的帮助(通常是一个问号或一个气球)。

    资源搜索网站大全 https://www.renrenfan.com.cn

    cursor光标使用

    cursor 属性规定要显示的光标的类型(形状),该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状(不过 css2.1 没有定义由哪个边界确定这个范围)。

    默认值:auto;继承性:yes;版本:css2;

    JavaScript 语法:object.style.cursor="crosshair";

    所有主流浏览器都支持 cursor 属性。注:Opera 9.3 和 Safari 3 不支持 url 值,任何版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

    cursor:url() 自定义光标的 URL。可以设置多个,用逗号 , 隔开,第一个加载失败则显示后面的。

    css:{cursor:url(图片路径),-moz-zoom-out;}//FF兼容
    css:{cursor:url(图片路径),auto;}//IE,FF,chrome浏览器都可以

    前面 url() 是自定义鼠标的样式,图像的地址,后面的参数是 css 标准的 cursor 样式,(IE下面可以不需要)

    注意:请在此列表的末端始终定义一种普通的光标,如 auto ,以防 URL 定义的光标不可用时无法正常显示光标。

    图标的格式根据不同的浏览器来分:IE支持 cur,ani,ico 这三种格式,FF支持 bmp,gif,jpg,cur,ico 这几种格式,所以一般使用 cur 或者 ico 格式的图片。

    如果是ani格式的话,可以在FF下面用 jpg,gif,bmp 来代替 (cursor:url(xxx.ani),url(xxx.gif),auto)

    图片大小最好是 32*32,反正在各个浏览器下面解析的大小不一样。

    IE中使用 cursor url() 出现鼠标闪动问题:当设置 cursor:url() 的容器元素添加了 title 或 alt 时,就会出现这种现象。可以把 title 标签去掉。

  • 相关阅读:
    编程算法
    JDBC连接MySQL数据库及演示样例
    CKEditor&ckfindtor
    从零開始开发Android版2048 (五) 撤销的实现
    TCP/IP之分层
    poj2239 Selecting Courses --- 二分图最大匹配
    英尺到米的换算
    概率dp ZOJ 3640
    Android应用程序注冊广播接收器(registerReceiver)的过程分析
    TsFltMgr.sys系统蓝屏的原因就在于QQ电脑管家!
  • 原文地址:https://www.cnblogs.com/xiaonian8/p/14041661.html
Copyright © 2020-2023  润新知