CODEWITHSUNDEEP
htmlcssiframehover
Behzad
Behzad

Reputation: 141

IE7/8: div loses :hover if mouse moves over an iframe which is inside the div!

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

Upvotes: 5

Views: 3895

Answers (3)

JP Silvashy
JP Silvashy

Reputation: 48535

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.

Upvotes: 0

Behzad
Behzad

Reputation: 141

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

Upvotes: 9

Joel Etherton
Joel Etherton

Reputation: 37543

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.

Upvotes: 0

Related Questions