html - 仅使用 css 悬停另一个 div 时显示 div

Question

我已经在网上搜索了这个，但没有找到类似的东西。

假设我们有 div A 和 div B。当将鼠标悬停在 div A 上时，div b 应该是可见的（应该看起来像覆盖）div A 而不是放在下面。

看起来只有 div A 的内容已更改为 div B 的内容。

这如何在纯 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>

Answer 1

这将起作用，但前提是两个 div 相邻并且 b 跟在 a 之后。

#a:hover + #b {
    background: #f00
}

<div id="a">Div A</div>
<div id="b">Div B</div>

如果您在使用之间有 div 〜

#a:hover ~ #b {
    background: #f00
}

<div id="a">Div A</div>
<div id="c">Div C</div>
<div id="b">Div B</div>

反过来，不幸的是，您将需要 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', '')}
);

完整的小提琴http://jsfiddle.net/p7hLL/5/

Answer 2

如果您不想使用选择器+或~与某些浏览器不兼容，则只有当<div />to show (eg div#b) 是<div />to hover (eg div#a) 的子项时才有可能。

<div id="a">
    <div id="b"></div>
</div>

<style>
    div#b {
        display: none;
    }

    div#a:hover div#b {
        display: block;
    }
</style>

Answer 3

它的作品，但你的CSS应该是这样的

<style>
#b{display:none;}
div#a:hover div#b{display:inline}
</style>