div को दिखाएं जब केवल एक सीएसएस

Question

का उपयोग करके दूसरे div को होवर करें, मैंने इस के लिए वेब खोजा है लेकिन मुझे कुछ भी नहीं मिला है।

कहें कि हमारे पास div ए और div B. है, जब div A पर होवर होता है, div b को प्रकट होना चाहिए (ओवरराइटिंग जैसा दिखना चाहिए) div A और नीचे नहीं रखा गया है।

यह div एक का केवल सामग्री की तरह दिखाई देनी चाहिए div बी की सामग्री के लिए बदल गया है

यह कैसे शुद्ध सीएसएस और एचटीएमएल में किया जा सकता?

#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

यह काम करेंगे, लेकिन केवल अगर दो divs निकट हैं और ख एक प्रकार है।

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

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

आप उपयोग के बीच ~

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

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

में divs है, तो दूसरी तरह के आसपास जाने के लिए, दुर्भाग्य से आप की आवश्यकता होगी जावास्क्रिप्ट

// 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 /> दिखाने के लिए वें का बच्चा है e <div /> होवर करने के लिए। यह ठीक है, अगर आप चयनकर्ता + या ~ का उपयोग नहीं करना चाहते हैं जो ब्राउज़र-संगत नहीं है।

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

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

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

Answer 3

इसका काम करता है

, लेकिन अपने सीएसएस इस

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