title: Hover is not firing after window resize in Chrome
body: <p>I'm having an issue with the pseudo-class <code>:hover</code> in Google Chrome.</p>
  
  <p>Basically I have an element that when in :hover state it's sibling is displayed. This works fine.</p>
  
  <p>Then I add a media query so that when the viewport has a specific <code>min-width</code> the element is no longer displayed but the sibling is.</p>
  
  <p>When going from the min-width to a smaller width the <code>display:none</code> on the sibling no longer fires.</p>
  
  <p>It might be easier to understand by taking a look at this example. Try resizing the viewport.</p>
  
  <p><a href="http://jsfiddle.net/5gPGR/1/" rel="nofollow">http://jsfiddle.net/5gPGR/1/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="container"&gt;
    &lt;div id="trigger"&gt;
    &lt;/div&gt;
    &lt;div id="target"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#container {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    padding: 24px;
    line-height: 80px;
    background: #777;
    box-sizing: border-box;
  }
  #trigger {
    position: absolute;
    display: block;
    width: 50%;
    height: 80px;
    top: 0;
    right: 0;
    background: #275;
  }
  #target {
    position: absolute;
    display: none;
    width: 50%;
    height: 80px;
    top: 0;
    left: 0;
    background: #f57;
  }
  #trigger:hover ~ #target {
    display: block;
  }
  @media screen and (min-width: 400px) {
    #trigger {
      display: none;
    }
    #target {
      display: block;
    }
  }
  </code></pre>
  
  <p>This is only an issue in Chrome/Chrome Canary. I have tested in the latest versions of:</p>
  
  <ul>
  <li>Chrome</li>
  <li>Chrome Canary</li>
  <li>FF</li>
  <li>IE</li>
  <li>Safari</li>
  <li>Opera</li>
  </ul>
  
  <p>Is there something I can do to resolve this or do I just need to stick with javascript for these kinds of interfaces.</p>
  
  <p>EDIT:
  I forgot to mention that if I force the element state to <code>:hover</code> using chrome dev tools it starts working again until the next resize.</p>