CSS：鼠标悬停时同时显示和隐藏不同的div？

Question

以下是CSS示例，如何在鼠标悬停时显示隐藏的div：

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

- mbigun

Answer 1

这里是代码

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

   

- Bugaloo

---

过渡效果：所有属性在0.3秒内以缓入方式过渡。 - Pir Abdul

在两个类之间添加“+”对我有用.. .showhim:hover + .showme - Siddaram H

Answer 2

如果另一个div是父级的同级/子级或任何组合，则是的

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

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

- Patrick Evans

---

兄弟节点在那里不起作用。 - O.k

好的，确实是这样。不过，编辑了我的原始答案的人将它放入了一个堆栈片段中，而它最初并没有为此格式化（有一条注释使CSS无效）。请再试一次片段。 - Patrick Evans

是的，现在它可以工作了！所以，这个故事的寓意就是堆栈片段很邪恶 :) - O.k

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>

我不知道为什么这不可能。

- Developicus