CSS：在hover显示和隐藏不同的div在同一时间？

这里是CSS示例如何显示隐藏的div（在hover）：

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

和

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

我只能使用CSS来显示一个div并同时隐藏另一个div吗？ 这里是如何使用JS为此目的的示例： http : //jsfiddle.net/joshvito/GaZQ6/

Answer 1

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> 

Answer 2

如果其他div是兄弟/孩子，或者是父母的任意组合

  .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

你有没有尝试过这样的事情？

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

我不知道为什么它不应该是可能的。