jQuery css：当另一个 div 悬停时显示 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5766141/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css: show div when another div is hover
提问by nuttynibbles
I've got 2 divs. Div A and Div B. If Div A is hovered, then I need show Div B. Can this be achieved with pure css only? Or if I do it in query, how do i go about with this base on the assumption that we cannot use id for these 2 divs.
我有 2 个 div。Div A 和 Div B。如果 Div A 被悬停，那么我需要显示 Div B。这只能用纯 css 来实现吗？或者，如果我在查询中执行此操作，假设我们不能将 id 用于这 2 个 div，我将如何处理此问题。
Thanks
谢谢
回答by thirtydot
Assuming the two divs are contained in a div:
假设两个divs 包含在 a 中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>
The :first-childstuff is to work around this limitation that you set:
的:first-child东西是要解决这个限制，你设置：
base on the assumption that we cannot use id for these 2 divs
基于我们不能为这两个 div 使用 id 的假设
If you want the second divto stay visible when you hover over it, try this:
如果您希望将div鼠标悬停在第二个时保持可见，请尝试以下操作：
#container > div {
display: none
}
#container > div:first-child {
display: block
}
#container:hover > div {
display: block
}
回答by David says reinstate Monica
Please note that I've used element ids in these examples to identify which, specific, elements are used. In place of ids you could use almost any other CSS-selector, the important thing is the relationships betweenthe selected elements; in the first example I've used the adjacent-sibling selector, and in the latter the descendant selector.
请注意，我id在这些示例中使用了 element来标识使用了哪些特定的元素。id您几乎可以使用任何其他 CSS 选择器来代替s，重要的是所选元素之间的关系；在第一个示例中，我使用了相邻兄弟选择器，在后者中使用了后代选择器。
If you post your mark-up, and notify me with a comment, I'll try and revise the selectors to match what you're working with. Otherwise this is just a generic best-guess. And they're not always that useful...
如果您发布您的标记，并通过评论通知我，我会尝试修改选择器以匹配您正在使用的内容。否则，这只是一个通用的最佳猜测。而且它们并不总是那么有用......
That said, the answers appear below:
也就是说，答案如下：
If you've got super-simple mark-up then this canbe accomplished via CSS:
如果你有超级简单的标记，那么这可以通过 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. Or:
JS小提琴演示。或者：
#divB {
display: none;
}
#divA:hover #divB {
display: block;
}
<div id="divA">
Some content in 'divA'
<div id="divB">
Some content in 'divB'
</div>
</div>
回答by Roy Shoa
If you add a container to div A and div B you can do it very easy in this way:
如果您将容器添加到 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>
