Question

我有2个div。 Div A和Div B.如果Div A徘徊，那么我需要显示Div B.这只能用纯css实现吗？或者如果我在查询中这样做，我如何在假设我们不能对这两个div使用id的情况下使用此基础。

由于

Answer 1

假设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>

: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来确定使用哪些特定元素。代替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 A和div B添加一个容器，你可以通过这种方式轻松完成：

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

css：当另一个div悬停时显示div

3 个答案: