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/