IE7 / 8: div pierde: pase el mouse si el mouse se mueve sobre un iframe que está dentro del div!

Estoy tratando de agregar Facebook “como el botón” y Twitter “botón de Twitter” en una lista, mi estructura de lista es:

       

CSS es:

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

IE7 / 8: el problema es que cuando el mouse se mueve sobre el iframe, el elemento list pierde su foco.

Intenté solucionarlo con csshover.htc, pero no lo solucionó.

Funciona bien en otros navegadores.

puedes verlo en vivo aquí:
http://bit.ly/hsFtq6
necesitas registrarte en el sitio web, es fácil y rápido 🙂

Gracias

Lo arreglé de la misma manera que csshover.htc aunque agregar csshover.htc no lo solucionó.

 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;} 

Esto es por diseño. Una vez que ingresa el iframe, “abandona” la página principal. Las propiedades / acciones de CSS estarán separadas por esta barrera de nivel de aplicación. La única forma de superar esto es eliminar la limitación del iframe utilizando algún tipo de backend (quizás AJAX) para obtener los contenidos renderizados de la página secundaria y cargarlos en el InnerHTML de su div.

Creo que este es el comportamiento previsto, considere que esto violaría las políticas de XSS si se tratara de JS y este tipo de evento de burbujeo se llevara a cabo.