CSS-⿏标样式的设置,⼿形、移动、禁⽤、⽂本等
在 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;
css鼠标点击样式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>
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论