如何让css hover 失效(2)-木庄网络博客

2022-04-10 17:40:08 PHP中文网 JavaScript 百度已收录

说明: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》频道 >>

书籍

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者