CSS：悬停时同时显示和隐藏不同的 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17393231/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: On hover show and hide different div's at the same time?
提问by mbigun
Here is CSS example how to show hidden div (on hover):
这是如何显示隐藏的 div（悬停时）的 CSS 示例：
<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 timeby using only CSS? Here is example how to use JS for this purpose: http://jsfiddle.net/joshvito/GaZQ6/
我可以显示一个DIV和隐藏另一个在同一时间使用只CSS？以下是如何为此目的使用 JS 的示例：http: //jsfiddle.net/joshvito/GaZQ6/
回答by Bugaloo
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>
回答by Patrick Evans
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{
display:none;
} <div class="showhim">
HOVER ME
<div class="showme">hai</div>
<div class="hideme">bye</div>
</div>
<div class="hideme2">bye bye</div>回答by ITFarmer
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.
我不知道为什么它不应该是可能的。
