Member Avatar for behzad.gh

I'm trying to add faceboock "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 it out live here:

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

thanks

  • 2 Contributors
  • 2 Replies
  • 199 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Dani

Dani AI

Generated

Short technical summary: IE7/8 treat an embedded iframe as a separate windowed control that takes pointer focus, so a parent using the :hover pseudo-class will lose that state when the cursor enters the iframe. That behavior is a browser limitation, not a CSS bug. The pragmatic approach taken by — mirroring the hover state with script so the parent keeps its hover style while the iframe is active — is a valid and practical workaround (thread marked solved by ).

Suggested, robust patterns and tradeoffs:

  • Mirror the hover state on the iframe element itself (mouse and focus events) so the parent retains its visible hover styling. The example below shows a modern, simple pattern; adapt event attachment for older IE (attachEvent or jQuery .on as appropriate).
  • Prefer a click-to-reveal interaction or a lightweight share link/popup for cross-domain widgets when possible. That removes reliance on :hover entirely and is more reliable across legacy browsers.
  • For accessibility, make the iframe focusable (tabindex) and reflect focus as the same visual state used for hover.

Example: mirror hover via element events

// mirror hover state when interacting with an iframe
Array.prototype.forEach.call(document.querySelectorAll('.item'), function(item){
  var frame = item.querySelector('iframe');
  if (!frame) return;
  function setHover(on){ item.classList[ on ? 'add' : 'remove' ]('hover'); }
  item.addEventListener('mouseenter', function(){ setHover(true); });
  item.addEventListener('mouseleave', function(){ setHover(false); });
  frame.setAttribute('tabindex', '0'); // keyboard access
  frame.addEventListener('focus', function(){ setHover(true); });
  frame.addEventListener('blur',  function(){ setHover(false); });
});

Caveats and notes: cross-origin iframes cannot be inspected from the parent (same-origin policy), so solutions that rely on reading inner iframe state are not possible. CSS properties like pointer-events: none are not reliably available in IE7/8, so overlay tricks are fragile there. For legacy-targeted UIs, the scripted hover-mirroring or a click-to-toggle pattern are the safest options.

Member Avatar for behzad.gh

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;}
commented: Thanks for taking the time to post this +24
Member Avatar for Dani

Hi,

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.