Behzad 20

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

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 out it live here:
http://bit.ly/hsFtq6


you need to signup at website, it's easy and fast :)

thanks

2 answers

Behzad 20
0
points
This was chosen as the best answer

I've fixed the problem 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;}
Answered almost 6 years ago by Behzad
0
points

If you're just adding social media buttons, there has to be a better way than iframes. It looks like IE has a hard time keeping track of the mouse hover when iframes are involved. I'd be surprised if there was any way to fix this with JavaScript, an htc file, etc.

Answered almost 6 years ago by sdleihssirhc