CSS: On hover show and hide different div's at the same time?

Question

Here is CSS example how to show hidden div (on hover):

<div class="showhim">HOVER ME<div class="showme">hai</div></div>

and

.showme{ 
display: none;
}
.showhim:hover .showme{
display : block;
}

Can I show one div and hide another one at the same time by using only CSS? Here is example how to use JS for this purpose: http://jsfiddle.net/joshvito/GaZQ6/

score 102 · Accepted Answer · edited Jan 16 '17 at 12:06

102

http://jsfiddle.net/MBLZx/

Here is the code

 .showme{ 
   display: none;
 }
 .showhim:hover .showme{
   display : block;
 }
 .showhim:hover .ok{
   display : none;
 }

 <div class="showhim">
     HOVER ME
     <div class="showme">hai</div>
     <div class="ok">ok</div>
</div>

edited Jan 16 '17 at 12:06

Pierre C.

1,591
2
16
29

answered Jun 30 '13 at 18:01

Bugaloo

1,671
3
16
21

3

transition:all .3s ease-in; – Pir Abdul Feb 29 '16 at 12:28
adding '+' between two classes worked for me.. `.showhim:hover + .showme` – Siddaram H Mar 06 '18 at 10:29

Patrick Evans · Answer 2 · 2020-02-04T10:01:13.923

16

if the other div is sibling/child, or any combination of, of the parent yes

    .showme{ 
        display: none;
    }
    .showhim:hover .showme{
        display : block;
    }
    .showhim:hover .hideme{
        display : none;
    }
    .showhim:hover ~ .hideme2{ 
        display:none;
    }

    <div class="showhim">
        HOVER ME
        <div class="showme">hai</div> 
        <div class="hideme">bye</div>
    </div>
    <div class="hideme2">bye bye</div>

edited Feb 04 '20 at 10:01

answered Jun 30 '13 at 18:03

Patrick Evans

41,991
6
74
87

sibling does not work there – O.k Feb 04 '20 at 08:25
@O.k it does, whoever edited my original answer put it into a stack snippet which it wasn't originally formatted for (there was a comment that was making the css invalid). Try the snippet again. – Patrick Evans Feb 04 '20 at 10:03
Yes, it works now! So, moral of the story is that stack snippets are evil :) – O.k Feb 04 '20 at 10:49

score 1 · Answer 3 · answered Jun 30 '13 at 18:06

Have you tried somethig like this?

.showme{display: none;}
.showhim:hover .showme{display : block;}
.hideme{display:block;}
.showhim:hover .hideme{display:none;}

<div class="showhim">HOVER ME
  <div class="showme">hai</div>
  <div class="hideme">bye</div>
</div>

I dont know any reason why it shouldn't be possible.

CSS: On hover show and hide different div's at the same time?

3 Answers3

Linked