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

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

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

--更新

尝试了你所有的建议，但没有任何效果.

<div id="toolBar">
<button id="btnPin" title="点击固定工具栏" type="button"><img id="pin" src="../../images/icons/unpin.png" alt="Pin"/></button><img src="../../images/icons/search.png" 边框="0" alt="搜索"/></div></div>

上面的 html 包含在母版页 div 容器中.子 div 被 jQuery 隐藏，带有一些悬停输入/输出事件.父 div(工具栏)始终在页面上可见.当在 toolBar 上发生悬停时，将显示子 div.

这是 jQuery 代码

$('#toolBar').hover(ToolBar_OnHover, ToolBar_OnBlur);功能工具栏_OnHover(){$(this).children().fadeIn('fast');$(this).animate({ height: "100px" }, "fast");}功能工具栏_OnBlur(){$(this).children().fadeOut('fast');$(this).animate({ height: "50px" }, "fast");}

最后是一点css

#toolBar { 宽度:100%;高度:100px；文本对齐:居中；垂直对齐:中间；位置:绝对；底部:0；背景色:透明；}#toolBar div { 填充:5px 5px 0px 5px;宽度:75%；高度:95px；背景:透明 url('/images/toolbar-background.png') repeat-x;边距右:自动；左边距:自动；}

设置背景色或者边框就可以了 ...

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

(背景图像似乎是最隐蔽的解决方案)

I have a div with a child div inside it. I'm using jQuery to show / hide the child div whenever a mouse hovers over the parent div (parent div spans the entire bottom of the page. Width: 100% and height 100px). I've used both firebug and ie developer toolbar to confirm that the parent div is on the page.

I can hover over the empty parent div in both Chrome and FireFox and everything works fine. IE requires that I have some sort of text inside to hover over. The div hover event will not fire with just an empty div.

All plausible work arounds for this issue?

--Update

Tried all of your suggestions but nothing has worked yet.

<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>

The above html is contained within a master page div container. The child div is hidden with jQuery with some hover in/out events. The parent div (toolBar) is always visible on the page. When a hover occurs on toolBar the child div is shown.

Heres the jQuery code

$('#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");

}

Finally here's a little 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; }

it will work if you set a background-color or a border ...

if you could match either of these with the existing look then you would be ok..

(a background-image seems like the most unobtrusive solution)