HTML——鼠标形状发生变化，变为带有问号的help鼠标指针，更换超链接背景（鼠标变换超链接）。

最新推荐文章于 2022-03-15 21:16:00 发布

无忧#

最新推荐文章于 2022-03-15 21:16:00 发布

阅读量1.1k

点赞数 3

文章标签： css3 css 前端 html html5

本文链接：https://blog.csdn.net/weixin_52473454/article/details/121253950

版权

该博客介绍了如何使用CSS来改变超链接的背景图片和字体颜色，以及当鼠标悬停在'帮助'链接上时如何更改鼠标指针形状为帮助形状。通过示例代码展示了如何设置a标签和a.help类的样式，以及如何使用table布局和背景图片来创建网页布局。

摘要由CSDN通过智能技术生成

要求：

鼠标移动到链接上改变背景，鼠标移动到“帮助”上后，鼠标形状发生变化，变为带有问号的help鼠标指针。

首先是改变背景，即改变a标签的背景图片，我们可以在a类选择器中设置原始的背景图片，在鼠标移动到超链接上时改变超链接的背景图片和字体颜色，同理，在鼠标移动到帮助（help类）时，改变鼠标的指针形状。（关于鼠标形状类型可以参考鼠标样式（css）_无忧#的博客-CSDN博客，关于超链接状态可以参考超链接状态html_无忧#的博客-CSDN博客）。

关键代码如下：

a{
	
	background:url(img/button3.jpg) no-repeat;	/* 超链接背景图片 */
}
a:hover{
	color:#FFFFFF;
	background:url(img/button4.jpg) no-repeat;	/* 变换背景图片 */
}
a.help:hover{								/* “帮助”按钮的样式 */
	cursor:help;							/* 变幻鼠标形状 */
}

使用两个table完成，图片分别位于images下，因图片大小不能填充整个屏幕，所以会有两个图片（banner2_bg.jpg和banner3_bg.jpg）辅助完成工作。

全部代码如下（可以直接运行）：

<html>
<head>
<meta charset="UTF-8">
<title>鼠标变幻超链接</title>
<style>
body{
	padding:0px;
	margin:0px;
	background-color:#efe5e2;
}
table.banner{
	background:url(img/banner2_bg.jpg) repeat-x;
	width:100%;
}
table.links{
	background:url(img/button3_bg.jpg)urepeat-x;
	font-size:12px;
	width:100%
}
a{
	width:80px; height:32px;
	padding-top:10px;
	text-decoration:none;
	text-align:center;
	background:url(img/button3.jpg) no-repeat;	/* 超链接背景图片 */
}
a:link, a visited{color:#2d2d26;}
a:hover{
	color:#FFFFFF;
	text-decoration:none;
	background:url(img/button4.jpg) no-repeat;	/* 变换背景图片 */
}
a.help:hover{								/* “帮助”按钮的样式 */
	cursor:help;							/* 变幻鼠标形状 */
}
</style>
   </head>
<body>
<table cellpadding="0" cellspacing="0" class="banner">
	<tr><td><img src="img/banner2_left.jpg" border="0"></td></tr>
</table>
<table cellpadding="0" cellspacing="0" class="links">
	<tr><td><a href="#">首页导读</a><a href="#">推荐版面</a><a href="#">推荐文章</a><a href="#">收藏夹</a><a href="#">我的信箱</a><a href="#">休闲娱乐</a><a href="#" class="help">帮助</a></td></tr>
</table>
</body>
</html>

我的图片保存位置如下：