CSS|hover如何控制非hover指向元素的显示隐藏(全攻略) CSS|CSS3

网上有很多资料是关于通过hover显示或隐藏指向元素的子元素
具体是这样

Document - 锐客网.inter{display: none; } .app:hover .inter{display: block; }top inter

其实按正常思路来讲，这是前端最基础的一个功能，相当于京东，淘宝头部导航栏的一个小功能，其实这功能是可以通过js来写的，而且更灵活，但本文主要讲css,所以不做延伸
其实本文的重点是，如何控制其他元素的显示隐藏或样式修改，非子元素
例如，这样一段代码

Document - 锐客网appbottom

如何通过app类显示隐藏bottom类
是的，我们可以用到相邻兄弟选择器
这样写

Document - 锐客网.bottom { display: none; }.app:hover+.bottom { display: block; }appbottom

这个时候有人就要问了，什么是相邻兄弟选择器？
解答:
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
可能有些有心的看客表示，如果不是相邻的呢。
其实是有办法的，看代码

Document - 锐客网.bottom { display: none; }.app:hover~.bottom { display: block; }appapp_bottom bottom

这里用到了兄弟选择器
兄弟选择器:~表示某元素后所有同级的指定元素，强调所有的
可能有人又会问了，如果上面的代码里有两个bottom,但是我只想显示一个bottom里的内容怎么办？
看代码

Document - 锐客网.bottom { display: none; }.app:hover~.bottom.show { display: block; }appapp_bottom bottom bottom bottom

不能跟电脑死干，做一些无法改变的事，我们灵活一点，修改兄弟选择器的指向。

【CSS|hover如何控制非hover指向元素的显示隐藏(全攻略)】可能有些聪明人会问，那我能不能显示多个元素
如果使用兄弟选择器绝对ok

Document - 锐客网.bottom { display: none; }.app:hover~.bottom.show { display: block; }appapp_bottom bottom bottom bottom bottom bottom

这样不就实现了吗？O(∩_∩)O
本文内容已结束

CSS|hover如何控制非hover指向元素的显示隐藏(全攻略)