Java教程

2021-06-03

本文主要是介绍2021-06-03，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

HTML中CSS伪类

  1. 什么是伪类？
    伪类是用于向被选中元素添加特殊的效果，伪类用于定义元素的特殊状态。

  2. :hover伪类选择器。
    hover用于鼠标光标置于其上的连接，hover效果能给网页增加一些动态效果。使用hover伪类这里就可以在CSS上代替了JS的脚本操作简化了操作。css中:hover是一个伪类选择器，:hover伪类选择器在鼠标移到元素上时向此元素添加特殊的样式。:hover选择器适用于所有元素。

  3. 使用场景
    要使用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的样式效果

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

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

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

这篇关于2021-06-03的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航