html - 悬停在元素上并使另一个元素同时出现

Question

很长一段时间以来，我一直在努力解决这个问题，但我似乎无法理解。我有以下 HTML:

<div class="b">
    <button>Show when I hover</button>
</div>
<div class="A">When I hover over this the background should change</div>

与相应的CSS:

.b {
    float: right;
    display: none;
}
.A {
    float: left;
    display: inline;
    width: 1000px;
}

.A:hover {
    background: gray;
}

.A:hover + .b {
    display: block;
}

我想做的是，每当我将鼠标悬停在 A 上时，b div 和相应的按钮都应该显示。此外，我希望当鼠标悬停在按钮上时，A 的背景仍然是灰色，就好像我悬停在它上面一样。我似乎无法弄清楚这一点。有什么想法吗？

相关 JSFiddle:http://jsfiddle.net/sn19k1wz/3/

Answer 1

您可以通过更改 A 和 B 的位置来实现此目的

<div class="A">When I hover over this the background should change</div>
<div class="b">
    <button>Show when I hover</button>
</div>