將鼠標懸停在元素上並同時顯示另一個元素

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>

Answer 2

更改div的位置，將div標記懸停在第一個

像這樣 ：

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

演示網址

Answer 3

嘗試這樣： 演示

 .A {

    display: inline-block;
    width: 1000px;
      position: relative;
}
.b {   
    display: none;
    position: absolute;
    z-index: 999;
    right: 0;
    top:6px;
}
.A:hover {
    background: gray;
}
.A:hover + .b {
    display: block;
    background: red;
    cursor:pointer;
}