非零基础自学前端最后一遍一 HTML+CSS 14 额外知识补充 14.8 光标显示-cursor-pointer

朴灿烈づ我的快乐病毒、 2024-03-22 15:28 21阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  14 额外知识补充
         *   *  14.8 光标显示-cursor-pointer
             *   *  14.8.1 cursor

![在这里插入图片描述][8f4bf2401c8e4bec81ed01b53b384135.png_pic_center]

#### 一 HTML+CSS ####

#### 14 额外知识补充 ####

##### 14.8 光标显示-cursor-pointer #####

###### 14.8.1 cursor ######

*  cursor可以设置鼠标指针（光标）在元素上面时的显示样式
 *  cursor常见的设值有
    
     *  auto：浏览器根据上下文决定指针的显示样式，比如根据文本和非文本切换指针样式
     *  default：由操作系统决定，一般就是一个小箭头
     *  pointer：一只小手，鼠标指针挪动到链接上面默认就是这个样式
     *  text：一条竖线，鼠标指针挪动到文本输入框上面默认就是这个样式
     *  none：没有任何指针显示在元素上面

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        div {
         
          cursor: none;
          text-decoration: underline;
          color: #00f;
        }
      </style>
    </head>
    
    <body>
    
      <div>我是box</div>
      <a href="#">百度一下</a>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][b15d0bb9af744c6891f66c60cdd5e78b.png_pic_center]

放上去没有小手。

[8f4bf2401c8e4bec81ed01b53b384135.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/6a03944d49c94e7e8adbcc29ac2e73c0.png
[b15d0bb9af744c6891f66c60cdd5e78b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/4392572abd434c6b90633d9e7255816d.png