CODEWITHSUNDEEP
csscss-transitions
Vivek Vikranth
Vivek Vikranth

Reputation: 3505

CSS while hover a div how to display other class(or) div?

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">&nbsp;</div>
       </div>
       <div class="ac">&nbsp;</div>
       </body>

it doesn't seems to works is there anything wrong in statement please help me thanks n advance.

Upvotes: 2

Views: 424

Answers (3)

Zaheer Ahmed
Zaheer Ahmed

Reputation: 28528

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 }

Upvotes: 0

PSL
PSL

Reputation: 123739

Use Sibling selector over Cover. Demo

  .cover:hover ~ .ac { top:0px }

Upvotes: 2

Bas Slagter
Bas Slagter

Reputation: 9929

.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).

Upvotes: 3

Related Questions