【CSS】更改用户界面样式 ① ( 更改鼠标样式 | 更改鼠标样式应用场景 | 代码示例 )

本文链接：https://blog.csdn.net/shulianghan/article/details/130173128

文章目录

一、更改鼠标样式
二、更改鼠标样式代码示例
三、更改鼠标样式应用场景

一、更改鼠标样式

为对象元素设置 cursor 样式 , 可以更改鼠标移动到该元素上的显示样式 ;

cursor 样式常用属性值 :

default : 默认鼠标样式 , 白色箭头鼠标 ;
pointer : 小手形状 ;
move : 移动 - 十字架四个箭头 ;
text : 文本 - 鼠标移动到文本上的样式 ;
not-allowed : 禁止 ;

还有其它的属性值如下图所示 :

在这里插入图片描述

二、更改鼠标样式代码示例

代码示例 :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>鼠标样式修改</title>
</head>
<body>
	<ul>
		<li style="cursor: default;">default</li>
		<li style="cursor: pointer;">pointer</li>
		<li style="cursor: move;">move</li>
		<li style="cursor: text;">text</li>
		<li style="cursor: not-allowed;">not-allowed</li>
		<li style="cursor: auto;">auto</li>
		<li style="cursor: e-resize;">e-resize</li>
		<li style="cursor: help;">help</li>
		<li style="cursor: n-resize;">n-resize</li>
		<li style="cursor: ne-resize;">ne-resize</li>
		<li style="cursor: nw-resize;">nw-resize</li>
		<li style="cursor: progress;">progress</li>
		<li style="cursor: s-resize;">s-resize</li>
		<li style="cursor: se-resize;">se-resize</li>
		<li style="cursor: sw-resize;">sw-resize</li>
		<li style="cursor: w-resize;">w-resize</li>
		<li style="cursor: url();">url()</li>
	</ul>
</body>
</html>