Html – Detecting hover on invisible divs overlaying flash in IE7

csshtmlinternet-explorer-7

I have a page with a 100% width/height flash movie that is overlayed with HTML. Yeah, this site is a best-practice breaker.

One of the HTML overlays is a invisible div I use as a "magic detector". There is an element that slides in/out on the page, I use the invisible div to create a "hot area" around this element, so that the element will slide in/out when the mouse hovers this mystery magic invisible div.

The problem is that when a div has flash behind it, and is invisible — where invisible means "no background color", not "display:none" — IE7 doesn't detect hovers on it. As soon as the "invisible" element has a background color, IE7 detects it.

Here is a demonstration of the issue: http://lilleaas.net/woot/hoverdemo/. Click the grey box. Hover the rightost box that appears. Click the leftmost box again, and then try to hover the right box (now "invisible", no background color but it's still in the dom, as display: block.).

My question: Is it possible to have IE7 detect the hovering even when the div has no background color?

PS: I imagine tracking the X/Y of the mouse is a viable alternative.

For the purpose of archiving, I'm pasting the HTML in question here as well. The demo page I'm linking will probably be down a little while after my question has been answered.

The SWF I use in this example is just a blank movie.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="swfobject.js" type="text/javascript" charset="utf-8"></script>
  <script>
    $(function(){
      $("#thing").hover(function(){
        $("#debug").html("Hovered, via #thing");
      }).click(function(){
        $('#meh').toggleClass("colored");
      });

      $("#meh").hover(function(){
        $("#debug").html("Hovered, via #meh");
      });
    });

    swfobject.embedSWF("bg.swf", "main", "500px", "300px", "9.0.0", null, {}, {wmode: 'transparent'});
  </script>

  <style type="text/css" media="screen">
    body{
      margin:0;
    }

    #main{
      position:absolute;
      width:100%;
      height:100%;
      z-index:1;
    }

    #thing, #meh{
      width:200px;
      height:200px;
      position:absolute;
      z-index:2;
    }

    #thing{
      left:0px;
      background-color:#999;
    }

    #meh{
      right:0px;
    }

    #meh.colored{
      background-color:#666;
    }

    #debug{
      position:absolute;
      z-index:2;
      bottom:1em;
      background-color:#369;
    }
  </style>
    <title>invisible hovers</title>

</head>
<body>
  <div id="main"></div>

  <div id="thing">
    <p>Click to toggle color.</p>

    <p>In IE7, when the right box is colored, hover is detected. When the right box isn't colored, hover is not detected.</p>
  </div>
  <div id="meh"></div>

  <div id="debug"></div>

</body>
</html>

Best Answer

sept. 10, 2009

Well, it's quite a time before I passed by accidentally, Googlin' for some other stuff. But maybe this can by helpfull in case you didn't find it already:

  • IE is looking right through a transparent layer (without a background) as if it didn't exist.
  • But you can make IE "see" the transparent layer by ... adding a transparent background img in the transparent layer!
  • Now the only thing is to get transparency in the flash-element. You can accomplish this by adding some flash parameters. These will turn of the flash supremacy in regard to a html-layer above it.
  • In the meantime all flash handlers (links in the swf) are turned off. So in case you want to maintain some swf-handlers, you have to position the "invisible layer/area" quite exactly.

For a Dutch forum I made this illustration page: http://developerscorner.nl/csshunter/flashlinks-uitschakelen.htm.

  • The left side of the top-swf is uncovered, as also the left menu panel swf. Hovering / clicking over there is leading to the different links in the swf's.
  • Now the right side of the top-swf has a transparent layer upon it, as also the right hand manu-panel swf (the same as the left hand menu panel swf), which is completely covered.
  • The right part of the top-swf is now going to "Home" (the invisible html-link, with a tooltip) instead of going the "On the move" page which is linked along the full width of the top-swf.
  • The right menu is now completely overruled by the invisible layer over there, only one new link is implemented in the html, instead of the free choice of menu items.

In the source code you can find all ingredients!

Related Topic