Hovering on element and making another element appear at the same time

Question

I've been trying to figure this out for a long time and I can't seem to get it. I have the following HTML:

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

with the corresponding CSS:

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

.A:hover {
    background: gray;
}

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

What I'm trying to do is whenever I hover over A the b div and corresponding button should show. In addition, I want it such that when my mouse is on the button, the background of A is still gray as if I was hovering over it. I can't seem to figure this out. Any ideas?

Relevant JSFiddle: http://jsfiddle.net/sn19k1wz/3/

Answer 1

You can do this by changing position of A and 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

Change the div positions, hovering div tag should be the first one

Like this :

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

Demo URL

Answer 3

Try like this: Demo

 .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;
}