css - ページに埋め込み/iframe コードがある場合、Chrome のホバーが正しく機能しない

Question

これは少し奇妙ですが、ページに埋め込み/iframe コードがある場合、Chrome でのホバーが正しく機能しません。

問題は、上の 2 つのボックス (li) にマウス アウトすると、ゴースト ホバーが発生することです (つまり、マウスがホバリングしていなくてもホバー効果があります)。これは、ページに iframe がある場合にのみ発生します。iframe (YouTube 埋め込みコード用) を削除してみましたが、問題はなくなりました。

つながりはありますか？これは私のホバーコードです:

CSS:

.boxes > 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 > li:hover {
   background-color: #E0EDFF;
   border-color: #E0EDFF;
   box-shadow: 2px 2px 4px #BBB;
}

HTML:

<ul class="boxes">
  <li>
    <div class="detail">
        <h4>Some Title</h4>
        <div><p>Some paragraph. <a href="#">Read More »</a></p></div>
    </div>
  </li>
</ul>