IE7/8: div verliert: schweben, wenn Maus über einen iframe bewegt, der innerhalb der div ist!

Question

Ich versuche Facebook "Like-Button" hinzufügen und "tweet Button" auf einer Liste twittern, ist meine Liste Struktur:

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

CSS ist:

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

IE7/8: die Problem ist, wenn Maus bewegt sich über die iframe die listItem verliert seinen Fokus.

Ich habe versucht, es durch csshover.htc zu beheben, aber es repariert es nicht.

Es funktioniert gut in anderen Browsern.

Sie es überprüfen können live hier aus:
http://bit.ly/hsFtq6
müssen Sie auf der Website registrieren, ist es einfach und schnell :)

Dank

Answer 1

Ich habe es auf die gleiche Weise wie csshover.htc behoben, obwohl das Hinzufügen von csshover.htc es nicht behoben hat!

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

Das ist von Entwurf. Sobald Sie den Iframe eingeben, verlassen Sie die übergeordnete Seite. CSS-Eigenschaften/Aktionen werden durch diese Application-Level-Barriere getrennt. Der einzige Weg, dies zu überwinden, besteht darin, die iframe-Einschränkung zu entfernen, indem Sie eine Art Backend (vielleicht AJAX) verwenden, um den gerenderten Inhalt der untergeordneten Seite zu erhalten und diese in InnerHTML Ihres divs zu laden.

Answer 3

Ich glaube, das das gewünschte Verhalten ist, sollten Sie dies würde die XSS Richtlinien verstoßen, wenn es JS waren und diese Art von Ereignis sprudelnden war stattfindet.