CSS 设置鼠标的样式

2022年3月9日 158次阅读 来源: ￡白昼の星☆

常用的几种

1、crosshair光标呈现为十字线。

1、pointer 光标呈现为指示链接的指针(一只手)

3、move 此光标指示某对象可被移动。

4、e-resize 此光标指示矩形框的边缘可被向右(东)移动。

5、text 此光标指示文本。

6、wait 此光标指示程序正忙(通常是一只表或沙漏)。

<style>
    .default:hover{
        cursor: default;
        /* 默认光标（通常是一个箭头) */
    }
    .auto:hover{
       cursor: auto;
       /*默认。浏览器设置的光标*/
    }
    .crosshair:hover{
      cursor: crosshair;
      /*光标成十字线*/
    }
    .pointer:hover{
      cursor:pointer;
      /*光标呈现为指示链接的指针（一只手）*/
    }
    .move:hover{
      cursor: move;
      /*此光标指示某对象可被移动。*/
    }
    .e-resize:hover{
      cursor: e-resize;
      /*此光标指示矩形框的边缘可被向右（东）移动。*/
    }
    .text:hover{
      cursor: text;
      /* 此光标指文本 */
    }
    .wait:hover{
      cursor: wait;
      /*此光标指示程序正忙（通常是一只表或沙漏）*/
    }
    .help:hover{
      cursor: help;
      /*此光标指示可用的帮助(通常是一个问号或一个气球)。*/
    }
  </style>

详细 参见菜鸟教程：CSS cursor 属性 | 菜鸟教程

《CSS 设置鼠标的样式》

    原文作者：￡白昼の星☆
    原文地址: https://blog.csdn.net/weixin_44948981/article/details/123473791
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞