在IE中，空的div悬停事件无法触发

Question

我有一个

元素，里面嵌套了另一个

元素。我使用jQuery在鼠标悬停在父

元素上时显示/隐藏子

元素（父

元素横跨页面底部，宽度：100％，高度为100像素）。 我已经使用Firebug和IE开发者工具确认了父

元素在页面上存在。

在Chrome和Firefox中，我可以悬停在空的父

元素上，一切正常。但是在IE中，我必须在

内放置一些文本才能悬停。如果只有空的

元素，则悬停事件不会触发。

有没有可行的解决办法？

--更新

尝试了你们所有的建议，但还没有找到解决方法。

<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）始终显示在页面上。当在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; }

- Matt

---

你指定了父级 div 的高度和宽度，你是否也为子级 div 指定了相同的值？ - artlung

我刚刚用IE7尝试了一下，对我来说可以工作。 - Andrew Dyster

该死，我使用IE9并且它仍然存在这个bug（在边缘模式下）。我添加了一个纯色，元素才可以被点击和悬停，否则不行。能不能有人把IE团队送到地狱里去？谢谢，其他的不需要。 - Ciantic

在IE 9中存在很多bug。在这种情况下，IE 8和7更好。 - Chuck Norris

它在IE10中也会发生。干掉它，用火烧掉它。 - pocesar

是的，我来找这个。这个笑话太荒谬了。 - dudewad

Answer 1

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

如果你可以将它们与现有的外观匹配，那么就没问题了。

(背景图片似乎是最不引人注目的解决方案)

- Gabriele Petrioli

---

感谢您的帖子。只需要一个100%透明的背景图片，就完成了！ - Matt

@Matt，太棒了的想法.. 完全不显眼，而且能够胜任 +1 - Gabriele Petrioli

这对我没有起作用 - 当我添加了边框后，当鼠标悬停在边框上或非常靠近边框时才触发悬停事件。对于我的用途，我无论如何都不能使用边框，因为我需要一个可以在叠加图片的“顶部”接收悬停事件的不可见div... 透明背景对我很有用（注释和nbsp也不起作用...） - Kasapo

我讨厌这种把戏，但似乎是唯一的解决方案，谢谢。 - Chuck Norris

设置背景图片对我来说没有用，事实上我使用空的div作为背景图片，但IE7仍然无法触发事件。最终起作用的是一个非常丑陋的hack，使用条件HTML仅在IE7中插入文本，然后在（条件）样式表中将该文本颜色设置为透明。宽度和高度规格确定div的尺寸，就像其他浏览器一样，因此它（有点）不显眼。总之，是时候让IE7从游戏中退役了。 - Mansiemans

天啊，这个问题让我抓狂了。影响IE10中所有版本的兼容模式。 - pocesar

Answer 2

对我来说，评论和筛选器都没有起作用。 该div从未被渲染，因此无法悬停。

最终解决方案：

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

用一个一像素的透明GIF图像。当然可以工作！

- Germs

---

IE总是很特别，即使是IE10也对这个问题感到不满，无论如何感谢您的帮助！这里有一个透明的1x1 gif链接：http://www.golivetutor.com/tutorials/misc/transparent.html - Vojtiik

一个有效的链接到1x1透明gif：https://en.wikipedia.org/wiki/File:Clear.gif - Lorenzo Polidori

Answer 3

我知道这个问题已经有了答案，但我遇到了同样的问题。空的 div 不会触发函数。如果它有一个边框，只有边框本身才会启动函数。我尝试了很多东西，没有什么帮助。这是我的解决方案，几乎一样，唯一的区别是我没有使用图片。

div {             /* 在此处编写元素的名称、类或 ID */
background: #FFF; /* 您可以选择任何颜色，1.0-完全可见 */
opacity:0.0;      /* 所有浏览器的透明度设置除 IE 外 */
filter: alpha(opacity = 0); /* IE 的不透明度设置，0-透明和 100-完全可见 */
}

- michaeltintiuc

---

如果您想触发一个作为 div 子元素的 img，请勿这样做。 - Wykk

Answer 4

如果您想保留DIV，可以尝试以下方法：background-color: rgba(0,0,0,0.001);。

- zsitro

Answer 5

@Skateball：那个解决方案可行，但也会在FF/chrome中隐藏任何子元素。这是我的方法：

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

- David Hellsing

---

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

Answer 6

在“empty”元素内插入一个空注释即可。:)

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

这将强制IE渲染该元素。

- Thiago Belem

Answer 7

我发现将鼠标事件跟踪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个像素时，我会将相应的图像可见性更改为显示，同时隐藏所有其他图像，这样就可以制作出动画效果。（空的

元素在所有非IE浏览器中都工作正常，但这种方法在IE和非IE浏览器中都适用，因此不需要编写两种方式。）

- Apocalypse

Answer 8

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

当我添加了边框后，只有当鼠标悬停在边框上或非常靠近边框时才会触发悬停事件，但我不需要边框，所以我只使用了透明背景，并且它对我起作用... 透明背景对我起了作用（注释和 nbsp 也没有用...）

- Mughal Sahab

Answer 9

你只需要设置不透明度来让图层不可见，同时也应该设置背景。

{
    background: white;
    opacity: 0;
}

- WHITECOLOR

Answer 10

我能够利用"点字模式空白"，它是一个不可见的、非空格字符，仍然存在，占据了一个空间，并允许像鼠标悬停这样的事件继续触发。下面的代码片段展示了这一点（div 不是零宽度，因为它不是空的或只包含空格）：

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

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

- Scott Weaver