首页 > 代码库 > 兄弟级别的hover控制

兄弟级别的hover控制

文章摘自:http://blog.csdn.net/cicada_slough/article/details/43305347

这种不通过JS脚本,仅通过CSS实现有两种方法:
1、如果你#b元素是#a元素的子元素,可以直接通过 #a #b {...}这种方式定义CSS样式来控制
2、#a与#b是亲兄弟关系,有相同的父节点,且#b跟#a紧临,可以通过 #a + #b{..}来控制#b里面的元素样式;


下面给出第二种方式的示例:
<style>
    #a {color : #99ff66;}
    #a:hover + #b{color : #FF0000;}
</style>
HTML元素:
<div id=‘a‘>元素1</div>
<div id=‘b‘>元素2</div>
<div id=‘c‘>元素3</div>
如果上面的b与c调换位置则对应的CSS设置将不生效。

兄弟级别的hover控制