仅使用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: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 />要显示的是<div />悬停的孩子,这是可能的.如果您不想使用选择器+或者~不兼容浏览器,那就是正确的.

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

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

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