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

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

猜你喜欢

转载自my.oschina.net/u/3607067/blog/1628013

相关文章