Показать div при наведении другого div, используя только css

Я искал в Интернете для этого, но ничего не нашел.

Скажем, у нас есть 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>

Ответ 1

Это будет работать, но только если два divs смежны, а b следует за.

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

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

Если у вас есть divs между использованием ~

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

Ответ 2

Это возможно, если отображаемый <div /> является дочерним элементом <div /> для зависания. Это правильно, если вы не хотите использовать селектор + или ~, который не совместим с браузером.

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

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

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

Ответ 3

Его работы, но ваш css должен быть таким

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