CSS-鼠标样式的设置，手形、移动、禁用、文本等

清疚 2023-06-08 06:09 20阅读 0赞

在 CSS 中可以通过 `cursor` 样式属性来设置光标的样式；比如放在链接上的样式，光标在文本上的样式，移动时的样式等

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>default</td> 
   <td>光标样式为一个箭头，是默认的样式</td> 
  </tr> 
  <tr> 
   <td>pointer</td> 
   <td>手形的鼠标样式</td> 
  </tr> 
  <tr> 
   <td>move</td> 
   <td>移动时的鼠标样式（四个箭头组成的十字）</td> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>文本光标</td> 
  </tr> 
  <tr> 
   <td>not-allowed</td> 
   <td>禁止时的样式</td> 
  </tr> 
 </tbody> 
</table>

ul li { 
      width: 200px;
      height: 50px;
      /* 元素水平居中 */
      margin: 0 auto;
      /* 单行文本垂直居中 */
      line-height: 50px;
    }
    /* 默认 */
    ul li:nth-child(1):hover { 
      cursor: default;
      background-color: red;
    }
    /* 小手 */
    ul li:nth-of-type(2):hover { 
      cursor: pointer;
      background-color: green;
    }
    /* 移动时的样式 */
    ul li:nth-of-type(3):hover { 
      cursor: move;
      background-color: blue;
    }
    /* 文本光标 */
    ul li:nth-of-type(4):hover { 
      cursor: text;
      background-color: skyblue;
    }
    /* 禁止 */
    ul li:nth-of-type(5):hover { 
      cursor: not-allowed;
      background-color: wheat;
    }

<ul>
      <li>默认样式</li>
      <li>小手</li>
      <li>移动时的样式</li>
      <li>文本光标</li>
      <li>禁止时的样式</li>
    </ul>

![在这里插入图片描述][20191016183050986.gif]

[20191016183050986.gif]: /images/20230531/970b594a54444eb48167fe3ba087e64d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，20人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS文本样式基本设置--小结

一、分类 1. text-indent 首行缩进，单位em 1. text-align 文本对齐方式，left,center,right 1. text-dec

- 日理万妓/ 2024年03月27日 16:39/ 0 赞/ 118 阅读

相关 css鼠标样式

cursor其他取值 auto ：标准光标 default ：标准箭头

Bertha 。/ 2023年06月30日 06:47/ 0 赞/ 31 阅读

相关 CSS-鼠标样式的设置，手形、移动、禁用、文本等

在 CSS 中可以通过 `cursor` 样式属性来设置光标的样式；比如放在链接上的样式，光标在文本上的样式，移动时的样式等 <table> <thead> <tr

清疚/ 2023年06月08日 06:09/ 0 赞/ 21 阅读

相关 css鼠标样式

<table> <thead> <tr> <th>css</th> <th>说明</th> </tr> </thead> <tbody>

心已赠人/ 2022年11月26日 01:58/ 0 赞/ 201 阅读

相关 css 鼠标样式

css样式中鼠标形状的改变是通过cursor属性来决定的，如下所示： cursor: auto、hand、pointer、crosshair、default、text、v

小灰灰/ 2022年07月17日 02:27/ 0 赞/ 217 阅读

相关第21节 css设置文本样式

css设置文本样式 <html> <head> <title>css设置文本样式</title>

女爷i/ 2022年07月12日 07:39/ 0 赞/ 275 阅读

相关 CSS样式——文本、链接、鼠标、滚动条、背景

CSS——样式 1.文本样式 (1)class选择器： <h2 class="k1">1234567890</h2> (2)id选择器：

傷城~/ 2022年06月17日 09:20/ 0 赞/ 249 阅读

相关 css代码实现鼠标手型等样式

Example：CSS鼠标手型效果 CSS鼠标手型效果 Example：CSS鼠标手型效果 CSS鼠标手型效果注：pointer也是小手鼠标，建议大家用pointer，因

曾经终败给现在/ 2022年06月11日 09:44/ 0 赞/ 349 阅读

相关 CSS复习之用CSS设置文本样式

今日目录 1、设置字体样式 2、设置文字的倾斜效果 3、设置文字的加粗效果 4、设

墨蓝/ 2022年05月25日 09:54/ 0 赞/ 272 阅读

相关 css禁用鼠标事件

css禁用鼠标事件如何使用？这里介绍一下鼠标事件得使用。详细版。 css禁用鼠标事件代码： .disabled { pointer-events: none; ...

朱雀/ 2021年05月10日 02:27/ 0 赞/ 2186 阅读