CSS鼠标指针样式详解，鼠标经过变小手（链接类型指针）提示可点击

brains丶小白

已于 2022-09-01 16:57:15 修改

阅读量3k

点赞数 2

文章标签： css 前端

于 2022-08-30 09:40:57 首次发布

本文链接：https://blog.csdn.net/Yxd0724/article/details/126597001

版权

鼠标经过变小手

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>