CSS-鼠标样式的设置,手形、移动、禁用、文本等
在 CSS 中可以通过 cursor 样式属性来设置光标的样式;比如放在链接上的样式,光标在文本上的样式,移动时的样式等属性值作用default光标样式为一个箭头,是默认的样式pointer手形的鼠标样式move移动时的鼠标样式(四个箭头组成的十字)text文本光标allowed禁止时的样式ul li {width: 200px;...
·
在 CSS 中可以通过 cursor 样式属性来设置光标的样式;比如放在链接上的样式,光标在文本上的样式,移动时的样式等
| 属性值 | 作用 |
|---|---|
| default | 光标样式为一个箭头,是默认的样式 |
| pointer | 手形的鼠标样式 |
| move | 移动时的鼠标样式(四个箭头组成的十字) |
| text | 文本光标 |
| not-allowed | 禁止时的样式 |
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>

更多推荐


所有评论(0)