空 div 悬停事件在 IE 中未触发

Question

我有一个 div，里面有一个子 div。当鼠标悬停在父 div 上时，我使用 jQuery 显示/隐藏子 div（父 div 跨越页面的整个底部。宽度：100%，高度 100px）。我使用了 firebug 和 ie 开发人员工具栏来确认父 div 位于页面上。

我可以将鼠标悬停在 Chrome 和 FireFox 中的空父 div 上，一切正常。 IE 要求我在里面有某种文本来悬停。仅使用空 div 时不会触发 div 悬停事件。

此问题的所有可行的解决方法？

--更新

尝试了您的所有建议，但还没有任何效果。

<div id="toolBar">          
  <div>
    <button id="btnPin" title="Click to pin toolbar" type="button">
      <img id="pin" src="../../images/icons/unpin.png" alt="Pin" /></button>
      <img src="../../images/icons/search.png" border="0" alt="Search" />
  </div>
</div>

上面的 html 包含在母版页 div 容器中。子 div 通过 jQuery 隐藏，并带有一些悬停输入/输出事件。父 div (toolBar) 在页面上始终可见。当鼠标悬停在工具栏上时，会显示子 div。

这是 jQuery 代码

$('#toolBar').hover(ToolBar_OnHover, ToolBar_OnBlur);

function ToolBar_OnHover() {

  $(this).children().fadeIn('fast');
  $(this).animate({ height: "100px" }, "fast");

}

function ToolBar_OnBlur() {

  $(this).children().fadeOut('fast');
  $(this).animate({ height: "50px" }, "fast");

}

最后是一些 css

#toolBar { width: 100%; height: 100px; text-align:center; vertical-align:middle; position: absolute;  bottom: 0; background-color: Transparent;  }
#toolBar div { padding: 5px 5px 0px 5px; width:75%; height: 95px; background: transparent url('/images/toolbar-background.png') repeat-x; margin-right: auto; margin-left: auto; }

Answer 1

如果您设置背景颜色或边框，它将起作用...

如果您可以将其中任何一个与现有外观相匹配，那么您就可以了..

（背景图像似乎就像最不引人注目的解决方案）

Answer 2

任何评论和过滤器都不适合我。
div 永远不会被渲染，因此不可能悬停。

最终解决方案：

.aDiv {
    background: transparent url(../images/transparent.gif) repeat;
}

使用一像素透明 gif 图像。当然可以！

Answer 3

我知道问题已经得到解答，但我遇到了同样的问题。空的 div 不会触发该函数。如果它有边框，则只有边框本身才会启动该功能。我尝试了很多东西，但没有任何帮助。这是我的解决方案，几乎相同，唯一的问题是我没有使用图像。
将其添加到您的 CSS 中：

div {             /* write the element's name, class or id here */
background: #FFF; /* you can choose any colour you like, 1.0-fully visible */
opacity:0.0;      /* opacity setting for all browsers except IE */
filter: alpha(opacity = 0); /* opacity setting for IE, 0-transparent & 100-fully visible */
}

Answer 4

如果你想保留你的 DIV 这对我有用：
背景颜色：rgba(0,0,0,0.001);

Answer 5

@Skateball：该解决方案有效，但也隐藏了 FF/chrome 中的任何子元素。这是我的看法：

background:#000;
background:rgba(0,0,0,0);
filter:alpha(opacity=0);

Answer 6

这有点 hacky，我不知道它是否会改变布局，但你总是可以在 div 中放置一个   。

Answer 7

只需在“空”元素中插入一个空注释即可。 :)

<div><!-- --></div>

这将强制 IE 渲染该元素

Answer 8

可能是 hasLayout 标志该元素需要被强制。
这可以通过对其应用 CSS 属性 zoom:1 来完成。

Answer 9

.trasnparentIE
{
    background: url(../images/largeTransparent.gif) repeat;
}

当我添加边框时，悬停事件仅在鼠标位于或非常接近边框时触发，但我不需要边框，所以我只使用透明背景，它对我有用...透明背景对我有用（评论和nbsp也不起作用......）

Answer 10

您只需设置不透明度即可使图层不可见，并且还应该设置背景

{
    background: white;
    opacity: 0;
}

Answer 11

我发现将鼠标事件跟踪 div 浮动在某个区域上的最佳方法是使 div 宽度为 1px，高度为您需要的高度。然后给div一个你需要的实际宽度的透明右边框。这比透明图像效果更好的原因是，如果您使用图像，则无法跟踪鼠标移动事件，例如拖动，而 div 不会失去焦点（您将拖动图像）。当使用 jQuery UI 滑块或鼠标拖动来擦除动画时，我遇到了这个问题。这是我的代码的简单版本。

//container div to hold the animation images this part doesn't really matter to answer the question
<div style="position:absolute; left:0px; top:0px; width:200px; height:200px">
// a bunch of images stacked like one of those animation flip books you made when you were a kid
   <img id="image01" src="blah01.jpg" />
   <img id="image02" src="blah01.jpg" />
   <img id="image03" src="blah01.jpg" />
   // and so on
</div>
//
// now the div that tracks the mouse events this is what I am describing to answer the question
// it could certainly be used above nav items and would have less load time than an image
<div style="position:absolute; left:-1px; top:0px; width:1px; height:200px; border-right: solid 200px transparent; />

在我的应用程序中，鼠标每向左或向右移动 2 px，我就会提供适当的图像可见性，同时隐藏所有其他图像，宾果游戏你就有了一个动画。 （空 div 在所有非 IE 浏览器中都能正常工作，但这在 IE 和非 IE 中都有效，因此无需以两种方式编写它。）

Answer 12

我能够利用 "Braille Pattern Blank" 这是一个仍然“存在”的不可见的非空白字符，占用一个空间，并允许鼠标​​悬停等事件仍然触发。下面的代码片段显示了这一点（div 的宽度不是零，因为它是空的或仅包含空格）：

.notActuallyEmpty {
  background-color: gray;
  width:50px;
}

⠀⠀
<div class="notActuallyEmpty">⠀</div> <!--Unicode Character “⠀” (U+2800)--!>

Answer 13

如果你不需要支持IE6。在图形程序 (Photoshop) 中创建一个 1x1 的白框图像。将不透明度降低至 1%。另存为 PNG24 或 GIF。然后，将其作为透明 DIV 的背景图像。

这可以解决这个问题并保留任何子元素的不透明度。