多态图标(3)-HTML使用CSS切换

最新推荐文章于 2022-07-29 17:14:07 发布

玖零大壮

最新推荐文章于 2022-07-29 17:14:07 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： # c#

本文链接：https://blog.csdn.net/mybelief321/article/details/50184959

c# 专栏收录该内容

15 篇文章

订阅专栏

本节将演示如何使用HTML的CSS实现图标状态（link、hover、active）的切换，通过简单的HTML代码和CSS样式，展示图标在不同状态下的变化效果。

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

前言

本节实现的目标是使用HTML的CSS实现图标的状态的切换，效果图如下

HTML标签 <a> 四态

本demo使用html中的<a>标签来演示，<a>也是有四态，如下：

a:link /*未访问时的状态*/

a:visited /*已访问过的状态*/

a:hover /*鼠标移动到链接上时的状态*/

a:active /*鼠标按下去时的状态*/

本节只实现了其中的三态转换，分别为：link、hover、active，图标如下

该图标为90x30尺寸

HTML代码

上图为demo的文件夹内容，其中img文件夹里存放的是上图所示的三态图标，其中test.html内容如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
			.test a{background: url(img/testweb.png) no-repeat scroll 0 0 transparent; 	
			width: 30px;
			display: block;
		    height: 30px;
		    line-height: 12em;
		    overflow: hidden;
    }
    		.test a:hover{
    			background-position: -30px 0px;
    		}
    		
    		.test a:active{
    			background-position: -60px 0px;
    		}
		</style>
	</head>
	<body>
		<div class="test">
			<a >关闭</a>
		</div>
	</body>
</html>

该工程点此下载

你可以看到代码其实不多，因为我也是小白，好记性不如烂笔头，接下来我将上面用到的知识整理一下