空的div悬停事件不会在IE中触发 [英] Empty div hover event not firing in IE

问题描述

我有一个div里面有一个div div。我使用jQuery来显示/隐藏子div，只要鼠标悬停在父div上（父div跨越页面的整个底部。宽度：100％，高度100px）。我已经使用了萤火虫和开发者工具栏来确认父div在页面上。

我可以将鼠标悬停在Chrome和FireFox的空白父div上一切正常。 IE要求我在里面放置某种文本来盘旋。 div悬停事件不会仅仅是一个空的div。

所有合理的解决此问题的方法？

- 更新

尝试了所有建议，但都没有成功。

 < div id =toolBar> ; 
< div> 
 < img id =pinsrc =../../ images / icons / unpin.pngalt =Pin/>< / button> 
< img src =../../ images / icons / search.pngborder =0alt =搜索/> 
< / div> 
< / div> 
  

上述html包含在母版页div容器内。子div隐藏着jQuery，并且有一些悬停/关闭事件。父div（toolBar）始终在页面上可见。当鼠标悬停在toolBar上时，会显示子div。

继承jQuery代码

  $（'＃toolBar'）。hover（ToolBar_OnHover，ToolBar_OnBlur）; 
 
函数ToolBar_OnHover（）{
 
 $（this）.children（）。fadeIn（'fast'）; 
 $（this）.animate（{height：100px}，fast）; 
 
 
 $ b函数ToolBar_OnBlur（）{
 
 $（this）.children（）。fadeOut（'fast'）; 
 $（this）.animate（{height：50px}，fast）; 
 
 
 
 
 $ b $ p 
 $ b 
最后，这里有一段小小的css 
  #toolBar {width：100％; height：100px;文本对齐：中心;垂直对齐：中部;位置：绝对;底部：0;背景颜色：透明; } 
 #toolBar div {padding：5px 5px 0px 5px;宽度：75％;身高：95px;背景：透明网址（'/ images / toolbar-background.png'）repeat-x; margin-right：auto; margin-left：auto; } 
  
 
 
解决方案
如果您设置了背景色或边框 ... 
 
 
 
如果您可以将其中任何一种与现有外观相匹配，那么您就可以正常使用。
 
 
 
（背景图像看起来像是最不显眼的解决方案）
 
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)

                        
这篇关于空的div悬停事件不会在IE中触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！