【前端学习笔记】关于CSS通过一个块改变另一个块的样式 

<body>
<div id="a" style="background:#0F0; height:100px; width:100px;">
<div id="c" style="background:#FF0; height:50px; width:50px;">
</div></div>
<div id="b" style="background:#900; height:200px; width:200px;"></div>
</body>
#c{ display:none;}
#b{display:none;}
#a:hover+#b{ 
   display:block;
        }
#a:hover #c{
    display:block;}

c是a的子元素，使用a控制c的样式时，为 #a:hover #c{}

b是a兄弟元素，使用a控制b的样式时，要用+,为#a:hover+#b{}

需要改变样式一定都要写在css中，如果写在html中，由于在html优先级高，则改变的样式不会改变 

ps：:hover为悬浮，即悬浮在a块上时，改变b  c的样式

posted @ 2015-09-23 17:50  zipon  阅读(643)  评论(0)  编辑  收藏  举报