2021-06-03

最新推荐文章于 2024-05-11 12:37:58 发布

qq_41413469

最新推荐文章于 2024-05-11 12:37:58 发布

阅读量196

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_41413469/article/details/117529915

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTML中CSS伪类

什么是伪类？
伪类是用于向被选中元素添加特殊的效果，伪类用于定义元素的特殊状态。
:hover伪类选择器。
hover用于鼠标光标置于其上的连接，hover效果能给网页增加一些动态效果。使用hover伪类这里就可以在CSS上代替了JS的脚本操作简化了操作。css中:hover是一个伪类选择器，:hover伪类选择器在鼠标移到元素上时向此元素添加特殊的样式。:hover选择器适用于所有元素。
使用场景
要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。

实际代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		a {
			display: inline-block;
			height: 58px;
			width: 120px;
			color: rgb(255, 255, 255);
			font-style: 14px;
			text-decoration: none;
			line-height: 48px;
			text-align: center;
		}
		
		.navigation1 {
			background: url(img/bg1.png);
		}
		
		.navigation1:hover {
			background: url(img/bg5.png);
		}
		
		.navigation2 {
			background: url(img/bg2.png);
		}
		
		.navigation2:hover {
			background: url(img/bg6.png);
		}
		
		.navigation3 {
			background: url(img/bg3.jpg);
		}
		
		.navigation3:hover {
			background: url(img/bg6.png);
		}
		
		.navigation4 {
			background: url(img/bg3.png);
		}
		
		.navigation4:hover {
			background: url(img/bg7.png);
		}
	</style>

	<body>
		<a href="#" class="navigation1">五彩导航</a>
		<a href="#" class="navigation2">五彩导航</a>
		<a href="#" class="navigation3">五彩导航</a>
		<a href="#" class="navigation4">五彩导航</a>
	</body>

</html>

在这里插入图片描述

这里使用来了hover使鼠标悬浮在标签上会更换CSS的样式效果

在这里插入图片描述
鼠标悬浮到第一个标签时就成功的改变了样式。

注意：:hover 选择器可用于所有元素，不只是链接。

总结
hover是css中的一种伪类选择器，指鼠标移入然后移出的过程，这个操作可以改变元素的样式，而且它相应的子类也被改变。但无法改变元素的内容。如果需要改变内容，则还需要使用JS的鼠标事件中的onmouseover和onmouseout。也就是说:hover只是改变样式的效果，并不能改变标签里的内容，如果需要动态的改变内容，还是需要JS的时间监听。

qq_41413469

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-06-03

HTML中CSS伪类什么是伪类？伪类是用于向被选中元素添加特殊的效果，伪类用于定义元素的特殊状态。:hover伪类选择器。hover用于鼠标光标置于其上的连接，hover效果能给网页增加一些动态效果。使用hover伪类这里就可以在CSS上代替了JS的脚本操作简化了操作。css中:hover是一个伪类选择器，:hover伪类选择器在鼠标移到元素上时向此元素添加特殊的样式。:hover选择器适用于所有元素。使用场景要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就
复制链接

扫一扫