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

Question

我有两个div，Div A和Div B。如果Div A被悬停，我需要显示Div B。这能否只使用纯CSS实现？或者如果我使用jQuery，如何在不能使用id的情况下处理这个问题？

谢谢。

- chrizonline

---

请展示一些HTML，以便我们看到如何区分这两个DIV。 - Robert Koritnik

Answer 1

假设这两个 div 元素被包含在一个 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 是为了解决你设置的这个限制而存在的:

基于我们不能使用id来表示这两个div元素的假设。

---

如果你想在悬停时保持第二个 div 可见，请尝试这样做：

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

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

- thirtydot

---

如果有一个可行的解决方案，请给我点个赞。当然，你也可以使用类来完成同样的事情。 - Richard

Answer 2

请注意，这些示例中我使用了元素id来标识使用的特定元素。您可以使用几乎任何其他CSS选择器代替id，重要的是所选元素之间的关系；在第一个示例中，我使用了相邻兄弟选择器，而在后者中使用了后代选择器。

如果您发布您的标记，并通过评论通知我，我将尝试修改选择器以匹配您正在使用的内容。否则，这只是一个通用的最佳猜测。它们并不总是那么有用...

话虽如此，答案如下：

如果您的标记非常简单，则可以通过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演示。或：

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

。

- David Thomas

---

你的第一个答案更好，因为它没有使用ID。已经明确说明了你不能使用ID。 - Robert Koritnik

是的，不幸的是，如果没有标记，就无法使用其他任何东西来提供解决方案。尽管类也可以很容易地实现... - David Thomas

我知道问题是“不使用ID”，但这个问题在谷歌上排名第一，而这个解决方案对我有效（使用类）。所以+1并感谢！ - Richard

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/

- Roy Shoa