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

【问题标题】：Empty div hover event not firing in IE空 div 悬停事件未在 IE 中触发
【发布时间】：2011-01-10 15:55:05
【问题描述】：

我有一个 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; }

【问题讨论】：

你说你设置了父div的高度和宽度，你给子div做了同样的事情吗？
我刚用IE7试了一下。为我工作。
该死的，我有 IE9，但它仍然有这个错误（在边缘模式下）。我添加了纯色，元素是可点击和可悬停的，否则不是。有人可以在地狱中烧毁IE团队吗？没有别的了。
在 IE 9 中它确实是错误。在这种情况下，IE 8 和 7 更好。
IE10 中也会出现这种情况。杀死它，用火杀死它。

标签： jquery internet-explorer hover mousehover

【解决方案1】：

如果你设置背景色~~或边框~~，它会起作用...

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

（背景图像似乎是最隐蔽的解决方案）

【讨论】：

感谢您的帖子。只需要一张 100% 透明的背景图片，瞧！
@Matt，绝妙的主意.. 完全不引人注意，而且能胜任 +1
这对我不起作用 - 当我添加边框时，悬停事件仅在鼠标悬停或非常靠近边框时触发。出于我的目的，无论如何我都无法使用边框，因为我需要一个不可见的 div，它可以在透明的覆盖图像的“顶部”接收悬停事件......透明背景对我有用（cmets而且 nbsp 也没有工作......）
我讨厌这种技巧，但似乎是唯一的解决方案，谢谢。
甚至没有设置背景图像对我有用，事实上我使用空 div 作为背景图像但 IE7 仍然不会触发事件。最终奏效的是一个丑陋的黑客，使用条件 HTML 将文本插入到 div 中，仅适用于 IE7，然后在（条件）样式表中将该文本颜色设置为透明。宽度和高度规范决定了 div 的尺寸，就像在其他浏览器中一样，所以它（有点）不显眼。不管怎样，现在是 IE7 永远退出游戏的时候了

【解决方案2】：

cmets 和 filters 都不适合我。 div 永远不会呈现，因此无法悬停。

终极解决方案：

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

带有一像素透明 gif 图像。当然可以！

【讨论】：

IE 总是很特别，即使 IE10 对此问题不满意，还是感谢您的帮助！这是透明 gif 1x1 的链接：golivetutor.com/tutorials/misc/transparent.html
1x1 透明 gif 的工作链接：en.wikipedia.org/wiki/File:Clear.gif

【解决方案3】：

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

div { /* 在此处写入元素的名称、类或 id */ 背景：#FFF； /* 你可以选择任何你喜欢的颜色，1.0-完全可见 */ 不透明度：0.0； /* 除 IE 以外的所有浏览器的不透明度设置 */ 过滤器：阿尔法（不透明度= 0）； /* IE 的不透明度设置，0-透明 & 100-完全可见 */ }

【讨论】：

如果你想从 div 中触发一个子 img，则不需要。

【解决方案4】：

如果您想保留您的 DIV，这对我有用： background-color: rgba(0,0,0,0.001);

【讨论】：

【解决方案5】：

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

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

【讨论】：

这也会在 IE8 中隐藏我的子元素，即使我将新的 filter:alpha 值应用于子元素。

【解决方案6】：

这有点骇人听闻，我不知道它是否会改变布局，但你总是可以在 div 中放置一个&nbsp;。

【讨论】：

【解决方案7】：

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

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

这将强制 IE 呈现元素

【讨论】：

【解决方案8】：

可能需要强制元素的hasLayout 标志。这可以通过将 CSS 属性 zoom:1 应用于它来完成。

【讨论】：

【解决方案9】：

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

当我添加边框时，悬停事件仅在鼠标悬停或非常靠近边框时触发，但我不需要边框，所以我只使用透明背景，它适用于我......透明背景做了对我来说把戏（cmets 和 nbsp 也不起作用......）

【讨论】：

【解决方案10】：

你可以设置不透明度使图层不可见，你还应该设置背景

{
    background: white;
    opacity: 0;
}

【讨论】：

【解决方案11】：

我发现在一个区域上浮动鼠标事件跟踪 div 的最佳方法是将 div 设置为 1px 宽度和您需要的任何高度。然后给 div 你需要的实际宽度的透明边框。这比透明图像效果更好的原因是，如果您使用图像，则无法跟踪 mousemove 事件，例如拖动，而 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 像素，我将提供适当的图像可见性，同时隐藏所有其他图像，宾果游戏你有一个动画。（空的 div 在所有非 IE 浏览器中都可以正常工作，但在 IE 和非 IE 中都可以正常工作，因此无需两种方式编写。）

【讨论】：

【解决方案12】：

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

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

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

【讨论】：

【解决方案13】：

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

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

【讨论】：