hover失效的原因
发表日期:2021-07-14 文章编辑:洛壹网络 文章来源:网站建设公司
在设置CSS的hover时,有时会发现hover不起作用,总结一下原因:
提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
1.在设置:hover前加空格:
.one :hover {
background: #da56d0;
}
你发现鼠标经过class为one的时候背景不变,而经过one里面的其他div背景颜色发生变化,
说明:hover前加空格,本身不会有:hover的效果,而后代元素会有:hover的效果。
2.当鼠标经过时,让其他元素改变样式:
这时候你会发现,只有后代元素和兄弟元素(紧接在元素后的兄弟元素)才有效果,其他的:hover会失效。
这时需要这样子来设置:
.two:hover +.three {
background: #da56d0;
}
(注意把"+"号去掉,就不能达到效果了)
3.类名写错了;
4.:hover 被置于 :link 和 :visited 之前了;
5.你看错了;
在开发的过程当中,我们需要更加严谨的态度。不要在每一个小细节里犯错。
本文链接:https://www.szluoyi.com/news-details-39-471-1.html
版权声明:
1:本站所有内容均由互联网收集整理、上传,并且以计算机技术研究交流为目的,仅供大家参考、学习,不存在任何商业目的与商业用途,如描述有误或者学术不对之处欢迎及时提出,不甚感谢。
2、 如涉及版权问题,请联系我们4724325@qq.com第一时间处理;