html同级元素怎么控制,hover对同级兄弟元素以及子集元素的操作

兄弟级别的hover控制

不使用JavaScript脚本，仅通过CSS来实现时有两种方法：若元素#b是元素#a的子元素，则可以通过#a #b{……}来控制#b的CSS样式。

若#a与#b是亲兄弟关系，有相同的父节点，且#b紧跟在#a后面，则可通过#a + #b{……}来控制#b的CSS样式

下面给出方法二的例子：

例一

Document

#a {color : #99ff66;}

#a:hover + #b{color : #FF0000;}

元素a

元素b

元素c

注：若#b与#c调换，则对应的CSS样式设置不生效。

对子集元素和同级兄弟的子集元素的hover控制

可通过>和+来实现对子集元素、下一元素、下一元素的子集元素的CSS样式控制。

如下例：

Document

#a:hover {

color: #FFFF00;

}

#a:hover > #b:first-child {

color: #FF0000;

}

#a:hover > #b {

color: #FF00FF;

}

#a:hover + #c {

color: #00FF00;

}

#a:hover + #c > #d {

color: #0000FF;

}

元素a

元素b

元素b

元素c

元素d

本文由【waitig】发表在等英博客 本文固定链接：hover对同级兄弟元素以及子集元素的操作 欢迎关注本站官方公众号，每日都有干货分享！

点赞 (0)赏分享 (0)