IE7/8：div敗北：div内にあるiframeの上をマウスが動いたときにホバー！

Question

私はリスト上の "つぶやきボタンを" "ボタンのように" のFacebookを追加し、Twitterにしようとしている、私のリスト構造は次のとおりです。

<list> 
    <listItem> 
     <iframeContainer> 
      <iframe/> 
     </iframeContainer> 
    </listitem> 
</list> 

CSSは次のとおりです。

listItem iframeContainer {display:none;} 
listItem:hover iframeContainer {display:block;} 

IE7/8： はiframeの上にマウスを移動するにはlistItemのがフォーカスを失ったときに問題があります。

私はcsshover.htcによってそれを修正しようとしたが、それはそれを修正しません。

他のブラウザで正常に動作します。

あなたがここに住んで、それをチェックアウトすることができます：
http://bit.ly/hsFtq6
をあなたがウェブサイトでサインアップする必要があり、それが簡単かつ高速です:)

おかげ

Answer 1

私はcsshover.htcを追加すると、それを修正していないもののcsshover.htcと同じ方法でそれを修正しました！

if($.browser.msie){ 
    $('.item').live('mouseenter',function() { 
     $(this).addClass('hover'); 
    }); 
    $('.item iframe').live('hover',function() { 
     $(this).parents(".item").addClass('hover'); 
    }); 
    $(".item").live('mouseleave',function() { 
     $(this).removeClass('hover'); 
    }); 
} 

CSS：

.item:hover, .item.hover {background-color:#555;} 

Answer 2

これは仕様によるものです。 iframeを入力すると、親ページを「離します」。 CSSのプロパティ/アクションは、このアプリケーションレベルのバリアによって分離されます。これを克服する唯一の方法は、何らかのバックエンド（おそらくAJAX）を使用して子ページのレンダリングされたコンテンツを取得し、それらをdivのInnerHTMLにロードすることによってiframeの制限を取り除くことです。

Answer 3

私はそれがJSだったとイベントバブリングのこの種が行われていた場合、これはXSSの方針に反する検討し、これは意図した動作であると信じています。