问题
this is my sample stylesheet
<style>
.cover{ margin 0 auto;}
.cover .ab{ display:inline-block color:#000; height:25px;}
while hover the class .ab class .ac should drop from -25px from 0px
.cover .ab:hover .ac{ top:0px }
.ac{ position:absolute; top:-25px; height:25px;}
</style>
my html looks like
<body>
<div class="cover">
<div class="ab"> </div>
</div>
<div class="ac"> </div>
</body>
it doesn't seems to works is there anything wrong in statement please help me thanks n advance.
回答1:
.cover .ab:hover .ac { top:0px }
This is not working since .ac is not a child of .ab (and also not a child of .cover by the way).
回答2:
Use Sibling selector over Cover. Demo
.cover:hover ~ .ac { top:0px }
回答3:
you can achieve it if both of your divs are siblings:
<div class="cover">
<div class="ab">asdfa</div>
<div class="ac">test</div>
</div>
then css:
.ab:hover ~ .ac{ top:0px;height:25px; }
would work for you working Demo.
The general sibling combinator (~) works for siblings.
you can move your .ac div in .cover div or apply css on .cover div:
.cover:hover ~ .ac { top:0px }
来源：https://stackoverflow.com/questions/16140744/css-while-hover-a-div-how-to-display-other-classor-div