CSSです。ホバー時に別のdiv'を同時に表示・非表示するには？

非表示のdivを（hover時に）表示するCSSの例です。

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

そして

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

あるdivを表示し、別のdivを非表示にすることは、CSSだけで**可能でしょうか？ 以下は、この目的のためにJSを使用する方法の例です： [http://jsfiddle.net/joshvito/GaZQ6/][1].

プログラミング
css3 css
30日 6月 2013 в 5:56
12 ビュー
ソリューション

http://jsfiddle.net/MBLZx/

以下はそのコードです。

 .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>
SherloxFR
編集した答え 16日 1月 2017 в 12:06
解説 (3)

相手が親の兄弟・子、またはその組み合わせである場合 はい

    .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>
JIBIN BJ
編集した答え 2日 1月 2017 в 7:04
解説 (0)

このような試みはされましたか？

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

できない理由は何もないと思います。

解説 (0)