title: Hovering on element and making another element appear at the same time
body: <p>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:</p>
  
  <pre><code>&lt;div class="b"&gt;
      &lt;button&gt;Show when I hover&lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="A"&gt;When I hover over this the background should change&lt;/div&gt;
  </code></pre>
  
  <p>with the corresponding CSS:</p>
  
  <pre><code>.b {
      float: right;
      display: none;
  }
  .A {
      float: left;
      display: inline;
      width: 1000px;
  }
  
  .A:hover {
      background: gray;
  }
  
  .A:hover + .b {
      display: block;
  }
  </code></pre>
  
  <p>What I'm trying to do is whenever I hover over <code>A</code> the <code>b</code> div and corresponding button should show. In addition, I want it such that when my mouse is on the button, the background of <code>A</code> is still gray as if I was hovering over it. I can't seem to figure this out. Any ideas?</p>
  
  <p>Relevant JSFiddle: <a href="http://jsfiddle.net/sn19k1wz/3/" rel="nofollow">http://jsfiddle.net/sn19k1wz/3/</a></p>