1.hover对兄弟元素的操控
这种不通过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设置将不生效。
2.hover如何操作自己的子集元素以及所属子集元素的元素
通过 > 与 + 来控制下个元素，子集元素，下个元素的子集元素的CSS
-
<html>
-
<body>
-
<style>
-
#a {color : #FFFF00;}
-
#a:hover > #b{color : #FF0000;}
-
#a:hover + #c{color : #00FF00;}
-
#a:hover + #c > #b{color : #0000FF;}
-
</style>
-
<div id='a'>元素1
-
<div id='b'>元素2</div>
-
</div>
-
<div id='c'>元素3
-
<div id='b'>元素2</div>
-
</div>
-
</body>
-
</html>
又可以通过CSS选择器
，可以参考着按照自己的需求改
-
<html>
-
<body>
-
<style>
-
#a:hover {color : #FFFF00;}
-
#a:hover > #b:first-child{color : #FF0000;}
-
#a:hover > #b{color : #FF00FF;}
-
#a:hover + #c{color : #00FF00;}
-
#a:hover + #c > #b{color : #0000FF;}
-
</style>
-
<div id='a'>元素1
-
<div id='b'>元素2</div>
-
<div id='b'>元素2</div>
-
</div>
-
<div id='c'>元素3
-
<div id='b'>元素2</div>
-
</div>
-
</body>
-
</html>
阅读(5016) | 评论(0) | 转发(0) |
