title: Hover in Chrome is not working properly if there's an embed/iframe code on the page
body: <p>I know this is a bit weird but hover in Chrome is not working properly if I have an embed/iframe code on my page.</p>
  
  <p>The problem is that when I mouse out on the top two boxes (li), they would have a ghost hover (meaning, has a hover effect even if my mouse is no longer hovering). This only happens if there's an iframe on the page. I tried removing the iframe (for YouTube embed code) and the problem disappears.</p>
  
  <p>Is there any connection? This is my hover code:</p>
  
  <p>CSS:</p>
  
  <pre><code>.boxes &gt; li {
     background: none repeat scroll 0 0 transparent;
     border-image: none;
     border-style: none none dashed;
     border-width: medium medium 1px;
     box-shadow: none;
     display: block;
  }
  
  .boxes &gt; li:hover {
     background-color: #E0EDFF;
     border-color: #E0EDFF;
     box-shadow: 2px 2px 4px #BBB;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul class="boxes"&gt;
    &lt;li&gt;
      &lt;div class="detail"&gt;
          &lt;h4&gt;Some Title&lt;/h4&gt;
          &lt;div&gt;&lt;p&gt;Some paragraph. &lt;a href="#"&gt;Read More »&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>