CSS:在悬停时显示并同时隐藏不同的div？

Question

这是CSS示例如何显示隐藏的div(在悬停时):

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

和

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

我可以显示一个DIV和隐藏另一个在同一时间使用只CSS？以下是如何使用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>