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


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 it out live here:
you need to signup at website, it's easy and fast!


I've fixed the problem by the same way as csshover.htc though adding csshover.htc didn't fix it!

     $('.item').live('mouseenter',function() {
     $('.item iframe').live('hover',function() {
     $(".item").live('mouseleave',function() {


.item:hover, .item.hover {background-color:#555;}
commented: Thanks for taking the time to post this +24


Thanks so much for providing the solution :) I've marked this thread as solved.

In the future, when your question requires us to look at a live demo, try to provide a version of the demo that is not behind a wall. It will increase your response rate :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.