CSS：在悬停显示和隐藏不同的div同时？ [重复]

This question already has an answer here:

这个问题在这里已有答案：

Using only CSS, show div on hover over <a> 11 answers
仅使用CSS，将鼠标悬停在 11个答案上

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

这是CSS示例如何显示隐藏的div（在悬停时）：

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

我可以只使用CSS显示一个div并同时隐藏另一个div吗？以下是如何使用JS实现此目的的示例：http：//jsfiddle.net/joshvito/GaZQ6/

3 个解决方案

#1

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>

#2

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

如果另一个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>

#3

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.

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

#1