【HTML】鼠标特效

最新推荐文章于 2025-06-27 21:24:55 发布

idealistic

最新推荐文章于 2025-06-27 21:24:55 发布

阅读量2.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML小程序

本文链接：https://blog.youkuaiyun.com/idealistic/article/details/70194049

HTML小程序专栏收录该内容

24 篇文章

订阅专栏

本文介绍了如何使用CSS来改变网页中鼠标的样式，包括不同样式的应用实例，如手形、移动、帮助等，以及通过:hover伪类实现的鼠标悬停效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标特效</title>
</head>

<body>
<h2>CSS鼠标控制箭头</h2>
<div style="font-size:10pt;color:DarkBlue">
<p style="cursor:hand">手形</p>
<p style="cursor:move">移动</p>
<p style="cursor:help">帮助</p>
<p style="cursor:n-resize">箭头朝上双向</p>
<p style="cursor:pointer">指示</p>
<p style="cursor:wait">等待</p>
</div>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标手势</title>
</head>
<style>
a{
	display:block;
	background-image:url(t01e781575902ba7f2a.jpg);
	background-repeat:no-repeat;
	width:100px;
	text-align:center;
	height:30px;
	line-height:30px;
	color:#111111;
	text-decoration:none;
	}
a:hover{
	background-image:url(%E9%98%BF%E8%90%A8.PNG);
	color:#FF0000;
	text-decoration:none;
	}
.help{
	cursor:help;}
.text{cursor:text;}
</style>
<body>
<a href="#" class="help">帮助我们</a>
<a href="#" class="text">招聘信息</a>
</body>
</html>