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

2019独角兽企业重金招聘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

转载于:https://my.oschina.net/u/3607067/blog/1628013

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

【前端css】如何实现分隔线效果（css兄弟兄弟节点样式+ ~）
效果图如下需求说明不就是加一条分割线吗?有什么难的? 这可不是普通的分割线每行数据的下面需要有一条分割线,最后一行数据底部无需分割线,如果某行数据为空,则该行不显示(所以这条线不能写死) 解决方 ...
jQuery根据当前节点元素找到父子、兄弟节点元素进行添加或删除
目录 1.查找父子.兄弟节点元素 1)父级 2)子级 3)同级 2.添加删除选中的dom元素 jQuery根据ID删除元素 jquery的删除属性的方法 1.查找父子.兄弟节点元素在操作DOM元素的 ...
css 文字溢出...显示,hover时显示隐藏文字
1.文字溢出隐藏并...显示 .tem_content_row{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 2 ...
【CSS】实现按钮hover时背景色从左慢慢移动到右边
按钮鼠标移动上去时,新背景色从左到右滑过去思路: 1.正常情况下: 按钮通过伪类before和after,让按钮多两层的技巧容器大小跟按钮一样大,且在按钮的下面,刚开始宽度为0 2.鼠标移动过去: ...
Jquery找父元素，祖先，子元素，子孙，兄弟节点
jQuery.parent(expr) //找父元素 jQuery.parents(expr) //找到所有祖先元素,不限于父元素 jQuery.children ...
jquery 点击事件点击元素添加class，兄弟节点移除class
欢迎大家一起交流学习n(*≧▽≦*)n $("#circle").on('click', 'li',function(){$(this).addClass("active ...
Css hover时取子元素切换img 实现图片移入切换
<div class="patent-case"><div class="patent-title-imgo"><img src= ...
相对定位android,appium相对位置定位元素----父节点/兄弟节点定位
appium相对位置定位元素----父节点/兄弟节点定位发布时间:2020-06-30 05:51:41 来源:51CTO 阅读:5620 作者:niedongri 讲一下定位手机app上元素时定位 ...
js 兼容性封装获取第一个子元素，最后一个子元素，下一个兄弟元素，上一个兄弟元素
高级浏览器: chrome firefox ie9及以上符合web标准浏览器. 低版本浏览器: ie6,ie7,ie8. 节点和元素的适用范围:以firstChild和firstElementChil ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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