900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > CSS实现某元素hover时 所有兄弟节点样式改变

CSS实现某元素hover时 所有兄弟节点样式改变

时间:2021-12-30 10:51:49

相关推荐

CSS实现某元素hover时 所有兄弟节点样式改变

独角兽企业重金招聘Python工程师标准>>>

css 提供的兄弟节点选择器有两种

第一种:+ 相邻兄弟选择器( li + li )只能选择与自己紧紧相连的身后的一个兄弟,蓝瘦。。第二种:~ 通用兄弟选择器( li ~ li )只可以选择在自己身后的所有li小弟 ,行,你是大哥你牛逼

所以,我需要强大的css能够提供一个可以选择除了自己之外的所有兄弟选择器, 使用起来也是是这样的格式 ——li {某个符号}li { color: red }

但是理想很丰满,现实很骨干啊,你说气不气。

于是,机制的我采用了一个相对恶心的办法。

先通过li的父级,比如 ul整个hover时,把所有li的样式改为{ color:red } ,然后再通过某个li自己hover时,给自己加一个特别的样式,比如li:hover { color: green }

这么玩的话,就可以实现我需要只有自己最特别(是绿的),其他兄弟全都是一个鸟样。哈哈。。

上!demo!!!

<ul><li>我是第一</li><li>我是第二</li><li>我是第三</li></ul>

ul {&:hover {li {color: red;}}li {&:hover {color: green;}}}

这里是demo的链接https://codepen.io/lsner/pen/MQxBVW

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。