我有一个页面，其中包含 100% 宽度/高度的 Flash 影片，并覆盖有 HTML。是的，这个网站是最佳实践破坏者。
其中一个 HTML 覆盖层是一个不可见的 div，我将其用作“魔法探测器”。页面上有一个滑入/滑出的元素，我使用隐形div在该元素周围创建一个“热区域”，这样当鼠标悬停在这个神秘神奇的隐形div上时，该元素就会滑入/滑出。
问题是，当 div 后面有闪光并且不可见时(其中不可见意味着“无背景颜色”，而不是“显示:无”)，IE7 不会检测到其上的悬停。一旦“不可见”元素具有背景颜色，IE7 就会检测到它。
以下是该问题的演示:http://lilleaas.net/woot/hoverdemo/ 。单击灰色框。将鼠标悬停在出现的最右边的框上。再次单击最左边的框，然后尝试将鼠标悬停在右边的框上(现在“不可见”，没有背景色，但它仍然在 dom 中，作为 display: block。)。
我的问题:即使div没有背景色，IE7是否也可以检测到悬停？
PS:我想跟踪鼠标的 X/Y 是一个可行的替代方案。
为了存档的目的，我也将相关的 HTML 粘贴到此处。在我的问题得到解答后，我链接的演示页面可能会关闭一段时间。
我在此示例中使用的 SWF 只是一个空白影片。
<!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>
最佳答案
九月。 2009年10月
好吧，我已经很久才无意中路过这里了，谷歌搜索一些其他的东西。 但如果您还没有找到它，这也许会有所帮助:
- IE 直接透过透明层(无背景)查看，就好像它不存在一样。
- 但是你可以通过在透明层中添加透明背景img来让IE“看到”透明层!
- 现在唯一的事情就是获得 flash 元素的透明度。您可以通过添加一些闪存参数来实现此目的。这些将改变 Flash 相对于其之上的 html 层的霸主地位。
- 与此同时，所有 Flash 处理程序(swf 中的链接)都将关闭。因此，如果您想维护一些 swf 处理程序，则必须非常准确地定位“不可见层/区域”。
对于荷兰论坛，我制作了这个插图页面:http://developerscorner.nl/csshunter/flashlinks-uitschakelen.htm .
- 顶部 swf 的左侧以及左侧菜单面板 swf 均未被覆盖。将鼠标悬停/单击此处会导致 swf 中的不同链接。
- 现在，顶部 swf 的右侧有一个透明层，右侧的菜单面板 swf(与左侧的菜单面板 swf 相同)也被完全覆盖。
- 顶部 swf 的右侧部分现在将转到“主页”(不可见的 html 链接，带有工具提示)，而不是转到沿顶部全宽度链接的“移动中”页面 - swf。
- 右侧菜单现在完全被那边的不可见层所覆盖，仅在 html 中实现了一个新链接，而不是自由选择菜单项。
在源代码中你可以找到所有成分!
关于html - 在 IE7 中检测覆盖 Flash 的不可见 div 上的悬停，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/925817/