在IE中没有触发的空div悬停事件

Question

我有一个带有子div的div.当鼠标悬停在父div上时,我使用jQuery来显示/隐藏子div(父div跨越页面的整个底部.宽度:100%和高度100px).我已经使用了firebug和ie开发人员工具栏来确认父div在页面上.

我可以将鼠标悬停在Chrome和FireFox中的空父div上,一切正常.IE要求我有一些文本在里面悬停.div hover事件不会只用一个空div来触发.

所有合理的解决方案都适用于这个问题？

--update

尝试了所有的建议,但没有任何工作.

<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容器中.使用jQuery隐藏子div并进行一些悬停/输出事件.父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 */
}