IE7/8: div loses :hover if mouse moves over an ifr

Question

I'm trying to add facebook "like button" and twitter "tweet button" on a list, my list structure is:

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

css is:

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

IE7/8: the problem is when mouse moves over the iframe the listItem loses its focus.

I tried to fix it by csshover.htc but it doesn't fix it.

It works fine in other browsers.

you can check it out live here:
http://bit.ly/hsFtq6
you need to signup at website, it's easy and fast :)

Thanks

Answer 1

This is by design. Once 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 limitation by using some sort of backend (maybe AJAX) to get the rendered contents of the child page and load those into the InnerHTML of your div.

Answer 2

I believe this is the intended behavior, consider this would violate the XSS policies if it were JS and this sort of event bubbling was taking place.

Answer 3

I've fixed it by the same way as csshover.htc though adding csshover.htc didn't 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;}