Question

我有一个页面，其中100％宽度/高度的flash动画覆盖了HTML。是的，这个网站是最好的破坏者。

其中一个HTML叠加层是一个不可见的div，我用它作为“魔法探测器”。有一个元素可以在页面上滑入/滑出，我使用不可见的div在这个元素周围创建一个“热区”，这样当鼠标悬停这个神秘的魔法隐形div时，元素就会滑入/滑出。

问题是，当一个div后面有一个闪存，并且是不可见的 - 不可见的意思是“没有背景颜色”，而不是“display：none” - IE7没有检测到它上面的悬停。只要“不可见”元素具有背景颜色，IE7就会检测到它。

以下是该问题的演示：http://lilleaas.net/woot/hoverdemo/。单击灰色框。将鼠标悬停在出现的右侧框中。再次单击最左边的框，然后尝试将鼠标悬停在右侧（现在“不可见”，没有背景颜色，但它仍然在dom中，显示为：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>

Answer 1

九月2009年10月

嗯，在我不小心过去之前已经有一段时间了，Googlin还有其他一些东西。但也许这可以通过帮助，以防你没有找到它：

IE正在透过透明层（没有背景），好像它不存在一样。
但你可以让IE“看到”透明层......在透明层中添加透明背景img！
现在唯一的办法是在flash元素中获得透明度。您可以通过添加一些flash参数来完成此操作。对于它上面的html层，这些将改变闪存的优势。
与此同时，所有闪存处理程序（swf中的链接）都已关闭。因此，如果你想维护一些swf处理程序，你必须非常准确地定位“不可见的图层/区域”。

对于荷兰论坛，我制作了这个插图页面：http://developerscorner.nl/csshunter/flashlinks-uitschakelen.htm。

顶部swf的左侧未被覆盖，左侧菜单面板swf也未被覆盖。在那里悬停/点击会导致swf的不同链接。
现在顶部瑞士法郎的右侧有一个透明层，右侧手动面板swf（与左侧菜单面板swf相同）完全覆盖。
top-swf的右边部分现在转到“Home”（隐藏的html链接，带有工具提示），而不是沿着顶部的整个宽度链接的“移动中”页面瑞士法郎。
右边的菜单现在完全由那里的隐形图层覆盖，html中只实现了一个新链接，而不是自由选择菜单项。

在源代码中，您可以找到所有成分！

检测悬停在IE7中覆盖闪存的不可见div上

1 个答案: