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

【问题标题】：css: show div when another div is hovercss：当另一个 div 悬停时显示 div
【发布时间】：2011-04-23 18:40:23
【问题描述】：

我有 2 个 div。 Div A 和 Div B。如果 Div A 悬停，那么我需要显示 Div B。这只能用纯 css 实现吗？或者，如果我在查询中执行此操作，假设我们不能将 id 用于这 2 个 div，我该如何处理。

谢谢

【问题讨论】：

向我们展示一些 HTML，以便我们了解如何区分这两个 DIV。

标签： jquery css

【解决方案1】：

假设两个divs 包含在一个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 的东西是为了解决您设置的这个限制：

基于我们不能为这 2 个 div 使用 id

如果您希望第二个 div 在您将鼠标悬停在其上时保持可见，请尝试以下操作：

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

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

【讨论】：

+1 表示可行的解决方案。当然，你也可以对类做同样的事情。

【解决方案2】：

请注意，我在这些示例中使用了元素 ids 来确定使用了哪些特定元素。代替ids，您几乎可以使用任何其他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.

【讨论】：

您的第一个答案更好，因为它没有使用 ID。 明确声明您不能使用 ID。
嗯，是的；不幸的是，如果没有加价，就不可能使用其他任何东西提供解决方案。尽管类也可以很容易地工作......
我意识到问题是“不使用 ID”，但这个问题在谷歌中显示为 #1，这个解决方案对我有用（使用类）。所以 +1，谢谢！

【解决方案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/

【讨论】：