IE7 / 8: div loses: hover if mouse moves over iframe inside div!

Question

I am trying to add facebook "like button" and twitter "tweet button" to the list, my list structure is:

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

css:

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

IE7 / 8: the problem is that the mouse moves around the iframe and listItem loses focus.

I tried to fix it csshover.htc, but it did not fix it.

It works great in other browsers.

you can check it right here:
http://bit.ly/hsFtq6
you need to register on the site, it's easy and fast :)

thanks

Answer 1

I fixed it the same as csshover.htc, although adding csshover.htc did not fix it!

 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

This is by design. When you enter the iframe, you “leave” the parent page. CSS properties / actions will be separated by this application level barrier. The only way to overcome this is to remove the iframe restriction using some kind of backend (possibly AJAX) to get the displayed content of the child page and load them into the InnerHTML of your div.

Answer 3

I believe that this is the alleged behavior, believing that it would violate XSS policies if it were JS, and this event bubble happened.