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的时间监听。