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.
Disregard this section.
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>