在設置CSS的hover時，有時會發現hover不起作用，總結一下原因：
提示：在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 之後，纔是有效的。
提示：在 CSS 定義中，a:active 必須被置於 a:hover 之後，纔是有效的。
1.在設置:hover前加空格：
比如
<style type="text/css">
.one {
margin: 0 auto;
width: 400px;
height: 300px;
background: #ced05d;
}
.two {
margin: 0 auto;
width: 100px;
height: 100px;
background: #5a5aea;
}
.three {
margin: 0 auto;
width: 200px;
height: 100px;
background: #4b9c49;
}
.four {
margin: 0 auto;
width: 300px;
height: 100px;
background: #7b4141;
}
.one :hover {
background: #da56d0;
}
</style>
<body>
<h1>測試</h1>
<div class="one">
<div class="two">
</div>
<div class="three">
</div>
<div class="four">
</div>
</div>
</body>說明:hover前加空格，本身不會有:hover的效果，而後代元素會有:hover的效果。
2.當鼠標經過時，讓其他元素改變樣式：
這時候你會發現，只有後代元素和兄弟元素（緊接在元素後的兄弟元素）纔有效果，其他的:hover會失效
還是上個例子
把
.one :hover {
background: #da56d0;
}.one:hover .two {
background: #da56d0;
}改爲
.two:hover +.three {
background: #da56d0;
}而改爲
.two:hover .four {
background: #da56d0;
}3.類名寫錯了；
4.:hover 被置於 :link 和 :visited 之前了;
5.你看錯了;
等等……
共勉~
