关于CSS中hover失效的几个原因
2017-11-09 09:36
393 查看
在设置CSS的hover时,有时会发现hover不起作用,总结一下原因:
提示:在
CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
提示:在
CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
1.在设置:hover前加空格:
比如
[html] view
plain copy
<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会失效
还是上个例子
把
[html] view
plain copy
.one :hover {
background: #da56d0;
}
改为
[html] view
plain copy
.one:hover .two {
background: #da56d0;
}
发现能达到我们想要的效果
改为
[html] view
plain copy
.two:hover +.three {
background: #da56d0;
}
也能达到效果(注意把"+"号去掉,就不能达到效果了)
而改为
[html] view
plain copy
.two:hover .four {
background: #da56d0;
}
不能达到我们的效果(无论带不带加号)
3.类名写错了;
4.:hover 被置于 :link 和 :visited 之前了;
5.你看错了;
等等……
共勉~
转载地址:http://blog.csdn.net/sangjinchao/article/details/57403634?locationNum=13&fps=1
提示:在
CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
提示:在
CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
1.在设置:hover前加空格:
比如
[html] view
plain copy
<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会失效
还是上个例子
把
[html] view
plain copy
.one :hover {
background: #da56d0;
}
改为
[html] view
plain copy
.one:hover .two {
background: #da56d0;
}
发现能达到我们想要的效果
改为
[html] view
plain copy
.two:hover +.three {
background: #da56d0;
}
也能达到效果(注意把"+"号去掉,就不能达到效果了)
而改为
[html] view
plain copy
.two:hover .four {
background: #da56d0;
}
不能达到我们的效果(无论带不带加号)
3.类名写错了;
4.:hover 被置于 :link 和 :visited 之前了;
5.你看错了;
等等……
共勉~
转载地址:http://blog.csdn.net/sangjinchao/article/details/57403634?locationNum=13&fps=1
相关文章推荐
- 关于CSS中hover失效的几个原因
- 关于html中a标记点击连接之后,a:hover鼠标放上去失效的原因及解决方法!
- css中关于hover失效问题总结
- CSS 中hover不起作用的原因
- 【css】a:hover 设置上下边框在 ie6 和 ie7 下失效
- 关于使用struts2跳转后css和js失效的解决方式
- css的hover事件,如果点击之后通过js操作样式,hover事件就会失效的处理方法,外部css样式与js的DOM样式谁的权重高?
- 关于Asp.net2.0下Div+Css页面布局样式失效的解决方法
- 关于ListView中adapter调用notifyDataSetChanged失效的原因总结
- WCDMA缩略语 & 几个容易混淆的概念 & 关于掉话原因分析
- 关于调用外部CSS文件 失效的问题
- 关于CSS在IE6以下浏览器不支持:hover伪类的解决方式
- 关于.net 页面提交后 css失效或者部分失效的问题
- 2013年初次接触PHP网站快速开发(1):关于css表格td凌乱的原因探讨及分析
- 关于loose.dtd和xhtml1-transitional.dtd等文档类型定义模型中CSS失效的解决办法。
- IE6 a:hover失效 原因是haslayout
- 关于 submit 按钮的 onclick 验证事件,第一次验证失败,第二次 submit 按钮失效的原因解析
- 【几个关于CSS的网站】
- 修改css文件后,jsp页面在IE8中预览部分样式突然失效的原因
- 关于loose.dtd和xhtml1-transitional.dtd等文档类型定义模型中CSS失效的解决办法。