Html 仅使用 css 悬停另一个 div 时显示 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14382149/
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
Show div when hover another div using only css
提问by M. El-Set
I have searched the web for this one but didn't find anything similar.
我在网上搜索过这个，但没有找到类似的东西。
Say we have div A and div B. When hover on div A, div b should be visible ON (should look like overwriting) div A and not placed under.
假设我们有 div A 和 div B。当悬停在 div A 上时，div b 应该是可见的（应该看起来像覆盖）div A，而不是放在下面。
It should appear like only the content of div A has changed to content of div B.
它应该看起来像只有 div A 的内容已更改为 div B 的内容。
How can this be done in pure CSS and HTML?
这如何在纯 CSS 和 HTML 中完成？
#container > div {
display: none
}
#container > div:first-child {
display: block
}
#container > div:hover + div {
display: block
<div id="container">
<div>A</div>
<div>B</div>
</div>
回答by PassKit
This will work, but onlyif the two divs are adjacent and b follows a.
这将工作，但只有当两个div是相邻的和b遵循。
#a:hover + #b {
background: #f00
}
<div id="a">Div A</div>
<div id="b">Div B</div>
If you have divs in between use ~
如果您在使用之间有 div ~
#a:hover ~ #b {
background: #f00
}
<div id="a">Div A</div>
<div id="c">Div C</div>
<div id="b">Div B</div>
To go the other way around, unfortunately you will need Javascript
反过来，不幸的是，您将需要 Javascript
// Pure Javascript
document.getElementById('b').onmouseover = function(){
document.getElementById('a').style.backgroundColor = '#f00';
}
document.getElementById('b').onmouseout = function(){
document.getElementById('a').style.backgroundColor = '';
}
// jQuery
$('#b').hover(
function(){$('#a').css('background', '#F00')},
function(){$('#a').css('background', '')}
);
Full fiddle http://jsfiddle.net/p7hLL/5/
回答by algorhythm
It is just possible if the <div />to show is a child of the <div />to hover. That's just right, if you don't want to use the selector +or ~which is not browser-compatible.
如果<div />to show 是<div />to hover的子项，则这是可能的。如果您不想使用选择器+或~与浏览器不兼容，那就对了。
<div id="a">
<div id="b"></div>
</div>
<style>
div#b {
display: none;
}
div#a:hover div#b {
display: block;
}
</style>
回答by Prakash
Its works, but your css should be like this
它的作品，但你的CSS应该是这样的
<style>
#b{display:none;}
div#a:hover div#b{display:inline}
</style>
