在设置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>
你发现鼠标经过class为one的时候背景不变,而经过one里面的其他div背景颜色发生变化,
说明: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.你看错了;
等等……
共勉~
转载地址:http://blog.csdn.net/sangjinchao/article/details/57403634?locationNum=13&fps=1