淺談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作用域