鼠标经过变小手

div {
   cursor:pointer; // 直接给需要改变指针样式的对象添加该属性，不要被误导为 :hover 伪类
}

cursor属性及属性值介绍

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>鼠标经过的各种样例</title>
	</head>
	<body>
		<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
		<!-- 请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标 -->
		<span style="cursor:url(/图片路径);cursor:default">自定义指针url</span><br>
		<span style="cursor:auto">默认。浏览器设置的光标</span><br>
		<span style="cursor:crosshair">光标呈现为十字线</span><br>
		<span style="cursor:default">默认光标（通常是一个箭头）</span><br>
		<span style="cursor:e-resize">此光标指示矩形框的边缘可被向右（东）移动</span><br>
		<span style="cursor:help">此光标指示可用的帮助（通常是一个问号或一个气球）</span><br>
		<span style="cursor:move">此光标指示某对象可被移动</span><br>
		<span style="cursor:n-resize">此光标指示矩形框的边缘可被向上（北）移动</span><br>
		<span style="cursor:ne-resize">此光标指示矩形框的边缘可被向上及向右移动（北/东）</span><br>
		<span style="cursor:nw-resize">此光标指示矩形框的边缘可被向上及向左移动（北/西）</span><br>
		<span style="cursor:pointer">光标呈现为指示链接的指针（一只手）</span><br>
		<span style="cursor:progress">指正携带沙漏</span><br>
		<span style="cursor:s-resize">此光标指示矩形框的边缘可被向下移动（南）</span><br>
		<span style="cursor:se-resize">此光标指示矩形框的边缘可被向下及向右移动（南/东）</span><br>
		<span style="cursor:sw-resize">此光标指示矩形框的边缘可被向下及向左移动（南/西）</span><br>
		<span style="cursor:text">此光标指示文本</span><br>
		<span style="cursor:w-resize">此光标指示矩形框的边缘可被向左移动（西）</span><br>
		<span style="cursor:wait">此光标指示程序正忙（通常是一只表或沙漏）</span><br>
	</body>
</html>
# css # 前端
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

一文解读GaussDB(DWS)监控运维诊断优化能力

avatar 华为开发者空间
cover

GaussDB技术解读——GaussDB架构介绍（四）

avatar 华为开发者空间
cover

华为云数据仓库专业级开发者认证重磅发布

avatar 华为开发者空间