CSS: al passaggio del mouse mostra e nasconde diversi div allo stesso tempo?

Question

Ecco esempio CSS come mostrare div nascosti (al passaggio del mouse):

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

e

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

Posso mostrare un div e nascondere un altro allo stesso tempo utilizzando solo CSS? Ecco come utilizzare JS per questo scopo: http://jsfiddle.net/joshvito/GaZQ6/

Answer 1

http://jsfiddle.net/MBLZx/

Ecco il codice

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

 

Answer 2

se l'altro div è fratello/figlio, o qualsiasi combinazione di, del genitore si

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

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

Answer 3

Hai provato somethig come questo?

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

Non so alcun motivo per cui non dovrebbe essere possibile.