浅谈hover作用域
Posted 陈由梅
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浅谈hover作用域相关的知识，希望对你有一定的参考价值。
在前端页面制作中，我们时常要用到移动显示、隐藏的动态效果，我们一般采用js来实现此效果。不过在大部分情况下，我们也可以使用hover来实现此动态效果。
在此，我谈一谈hover的作用域问题，请看以下代码：
<html>
<head>
<title>1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<style type="text/css">
.a{width: 800px;height: 100px; color:#333;}
.a a:hover{color:red;}
.a a:hover span{color:green;}
.a:hover span{color:blue;}
</style>
<body>
<div class="a">
<a href="#">示例div a标签<span>示例a标签内的span标签</span></a>
<span>示例a标签外的span标签</span>
</div>
</body>
</html>
在上面这一段代码中，示例a标签内的span标签实现了hover的效果，字体颜色变为绿色，然而示例a标签外的span标签却并没有变成绿色，而是实现了.a:hover的效果，变成了蓝色。
原因很简单，当我们写下a:hover时，我们就已经给它写下了定义域，那就是当前a标签。此时，只有a标签内的标签，才能进一步选定，执行hover效果。
当我们写下.a:hover时，我们就已经给它写下了定义域，那就是当前a类。此时，只有a类内的标签，才能进一步选定，执行hover效果。
因此，当我们需要实现hover效果时，只有父标签下的子标签才能被父标签hover。
以上是关于浅谈hover作用域的主要内容，如果未能解决你的问题，请参考以下文章