鼠标相关样式

最新推荐文章于 2024-07-11 10:08:53 发布

端脑

最新推荐文章于 2024-07-11 10:08:53 发布

阅读量102

点赞数

分类专栏：前端文章标签：鼠标相关样式

本文链接：https://blog.csdn.net/qq_43776742/article/details/98070218

版权

前端专栏收录该内容

90 篇文章 2 订阅

订阅专栏

鼠标相关样式

参考下面代码或 https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor
cursor 改变鼠标箭头的样式。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   p:nth-child(1) {
	   	   cursor: default;	/*默认，箭头形状。*/
	   }

	   p:nth-child(2) {
	   	   cursor: pointer; /*手指形状*/
	   }

	   p:nth-child(3) {
	   	   cursor: text; /*I字形，选择文本时的形状。*/
	   }

	   p:nth-child(4) {
	   	   cursor: move; /*四项箭头的形状。*/
	   }

	   p:nth-child(5) {
	   	   cursor: help; /*求助箭头，一个箭头加一个问号。*/
	   }

	   p:nth-child(6) {
	   	   cursor: wait; /*等待的圆圈形状。*/
	   }
	   p:nth-child(7) {
	   	   cursor: grab; /*手掌形状，可抓取状态。*/
	   }
	</style>
</head>
<body>
	<div>
		<p>aaaa</p>
		<p>bbbb</p>
		<p>ccccc</p>
		<p>ddddd</p>
		<p>eeeee</p>
		<p>fffff</p>
		<p>ggggg</p>
	</div>
</body>
</html>

返回上一层目录

端脑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标相关样式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> p:nth-child(1) { cursor: default...
复制链接

扫一扫

专栏目录