css：當另一個div懸停時顯示div

Question

我有2個div。 Div A和​​Div B.如果Div A被徘徊，那麼我需要顯示Div B.這是否可以通過純css來實現？或者如果我在查詢中這樣做，我該如何處理這個基礎，假設我們不能使用這兩個div的id。

感謝

Answer 1

假設這兩種div s的包含在div：

http://jsfiddle.net/4p8CM/1/

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

的:first-child東西是要解決此限制，您設置：

基礎上的假設我們不能 使用這兩個div的ID

---

如果你想在第二div留下來，當你在它懸停可見，試試這個：

http://jsfiddle.net/4p8CM/3/

#container > div { 
    display: none 
} 
#container > div:first-child { 
    display: block 
} 
#container:hover > div { 
    display: block 
} 

Answer 2

請注意，我用的元素id S IN這些例子來識別，具體的，使用元素。代替id您幾乎可以使用任何其他CSS選擇器，重要的是之間的關係選定的元素;在第一個例子中，我使用了adjacent-sibling selector，後者使用了descendant selector。

如果您發佈您的標記，並通知我一個評論，我會嘗試修改選擇器以匹配您正在處理的內容。否則，這只是一個通用的猜測。而且他們並不總是有用的......

這就是說，答案出現下面：

如果你有超級簡單加價那麼這個可以可以通過CSS來實現：

#divB { 
    display: none; 
} 

#divA:hover + #divB { 
    display: block; 
} 

<div id="divA"> 
    Some content in 'divA' 
</div> 
<div id="divB"> 
    Some content in 'divB' 
</div> 

JS Fiddle demo。或者：

#divB { 
    display: none; 
} 

#divA:hover #divB { 
    display: block; 
} 

<div id="divA"> 
    Some content in 'divA' 
    <div id="divB"> 
     Some content in 'divB' 
    </div> 
</div> 

JS Fiddle demo。

Answer 3

如果添加一個容器div的你和DIV乙可以這樣做很容易：

<style> 
/* Only for testing */ 
.a, .b { 
    border: 1px solid black; 
} 
/* Hide the B div */ 
.b { 
    display:none; 
} 
/* Show the B div when hover on A (the container include only A when B is not displayed */ 
.container:hover .b { 
    display: block; 
} 
</style> 
<div class="container"> 
    <div class="a">A</div> 
    <div class="b">B</div> 
</div> 

http://jsfiddle.net/royshoa/bzhz8pou/