关于CSS中hover失效的几个原因
2017-02-26 10:48
441 查看
在设置CSS的hover时,有时会发现hover不起作用,总结一下原因:
提示:在 CSS 定义中,a:hover
必须被置于 a:link 和 a:visited 之后,才是有效的。
提示:在 CSS 定义中,a:active
必须被置于 a:hover 之后,才是有效的。
1.在设置:hover前加空格:
比如
说明:hover前加空格,本身不会有:hover的效果,而后代元素会有:hover的效果。
2.当鼠标经过时,让其他元素改变样式:
这时候你会发现,只有后代元素和兄弟元素(紧接在元素后的兄弟元素)才有效果,其他的:hover会失效
还是上个例子
把
改为
而改为
3.类名写错了;
4.:hover 被置于 :link 和 :visited 之前了;
5.你看错了;
等等……
共勉~
提示:在 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.你看错了;
等等……
共勉~
相关文章推荐
- 关于CSS中hover失效的几个原因
- css中关于hover失效问题总结
- 关于html中a标记点击连接之后,a:hover鼠标放上去失效的原因及解决方法!
- 关于.net页面提交后css失效或部分失效的问题
- net2.0,几个CSS失效问题,
- 关于.net 2.0web项目CSS失效的问题
- 关于loose.dtd和xhtml1-transitional.dtd等文档类型定义模型中CSS失效的解决办法。
- 关于CssHover.htc文件的问题
- 关于调用外部CSS文件 失效的问题
- 关于.net 中调用script的alert后 css失效的办法
- 关于loose.dtd和xhtml1-transitional.dtd等文档类型定义模型中CSS失效的解决办法
- Grails 开发Web系统:关于在gsp页面中调用CSS无效原因.
- WCDMA缩略语 & 几个容易混淆的概念 & 关于掉话原因分析
- asp.NET 2.0中引发CSS失效问题原因和解决方法
- css中关于超链接的四个属性一般正常顺序为:link,visited,hover,active
- 关于loose.dtd和xhtml1-transitional.dtd等文档类型定义模型中CSS失效的解决办法。
- 关于loose.dtd和xhtml1-transitional.dtd等文档类型定义模型中CSS失效的解决办法。
- 关于loose.dtd和xhtml1-transitional.dtd等文档类型定义模型中CSS失效的解决办法。
- 关于.net里调用外部CSS失效的问题解决
- 关于loose.dtd和xhtml1-transitional.dtd等文档类型定义模型中CSS失效的解决办法。