Question

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

假设我们有div A和div B.当鼠标悬停在div A上时，div b应该是可见ON（应该看起来像覆盖）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 />是<div />的孩子，则可能会悬停。如果您不想使用与浏览器不兼容的选择器+或~，那就是正确的。

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

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

3 个答案: