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

韩曙亮

发布于 2023-04-16 14:30:53

2.3K0

发布于 2023-04-16 14:30:53

文章被收录于专栏：韩曙亮的移动开发专栏

一、更改鼠标样式

为对象元素设置 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>

截图无法显示鼠标效果 , 展示下列表样式 :