Pokaż div po najechaniu na inny element div za pomocą tylko css

Question

Przeszukałem sieć pod kątem tego, ale nie znalazłem nic podobnego.

Powiedzmy, że mamy div A i div B. Po najechaniu na div A, div b powinno być widoczne ON (powinno wyglądać jak nadpisanie) div A i nie być pod nim.

Powinno wyglądać tylko zawartość div A zmieniła się zawartość div B.

Jak można to zrobić w czystym CSS i 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

będzie działać, lecz tylko jeśli dwa div sąsiadują b Następuje.

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

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

Jeśli masz div pomiędzy użytku ~

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

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

Aby przejść na odwrót, niestety trzeba będzie 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', '')} 
); 

Pełna skrzypce http://jsfiddle.net/p7hLL/5/

Answer 2

Jest możliwe, jeśli <div /> do pokazania jest dzieckiem e <div /> do najechania. To prawda, jeśli nie chcesz korzystać z selektora + lub ~, który nie jest zgodny z przeglądarką.

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

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

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

Answer 3

Jego prace, ale Twój css powinny być jak ten

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