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

时间:2010-01-28 23:56:53

标签: jquery internet-explorer hover mousehover

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

我可以将鼠标悬停在Chrome和FireFox中的空父div上,一切正常。 IE要求我有一些文本在里面悬停。 div hover事件不会只用一个空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容器中。使用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; }

13 个答案:

答案 0 :(得分:29)

如果您设置背景颜色或边框 ...

,它将起作用

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

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

答案 1 :(得分:15)

评论和过滤器的内容都不适用于我。 div永远不会呈现,所以不可能悬停。

终极解决方案:

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

使用一个像素透明的gif图像。当然有效!

答案 2 :(得分:5)

我知道问题已得到解答,但我遇到了同样的问题。空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 */
}

答案 3 :(得分:1)

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

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

答案 4 :(得分:1)

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

答案 5 :(得分:0)

这有点hacky,我不知道它是否会改变布局,但你总是可以在div中放一个&nbsp;

答案 6 :(得分:0)

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

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

这会强制IE渲染元素

答案 7 :(得分:0)

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

答案 8 :(得分:0)

我发现在区域上浮动鼠标事件跟踪div的最佳方法是使div 1px宽度和所需的高度。然后给div一个透明的边框 - 右边你需要的实际宽度。这比透明图像效果更好的原因是因为如果使用图像,则无法跟踪鼠标移动事件,例如拖动,而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浏览器中,空div工作正常,但这在IE和非IE中都有效,因此无需以两种方式编写它。)

答案 9 :(得分:0)

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

当我添加边框时,悬停事件仅在鼠标悬停或非常接近边框时触发,但我不需要边框,所以我只使用透明背景,它适用于我...透明背景做了诀窍对我来说(评论也不起作用......)

答案 10 :(得分:0)

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

{
    background: white;
    opacity: 0;
}

答案 11 :(得分:0)

我能够使用"Braille Pattern Blank",它是一个不可见的非空白字符,仍然是“那里”,占据了一个空间,并允许鼠标​​悬停之类的事件继续触发。下面的代码段显示了这一点(div不是零宽度,因为它为空或仅包含空白):

.notActuallyEmpty {
  background-color: gray;
  width:50px;
}
⠀⠀
<div class="notActuallyEmpty">⠀</div> <!--Unicode Character “⠀” (U+2800)--!>

答案 12 :(得分:-1)

如果您不必支持IE6。在图形程序(Photoshop)中,创建白盒的1x1图像。将不透明度降低至1%。保存为PNG24或GIF。然后,将其设为透明DIV的背景图像。

这会解决问题,并保留所有子元素的不透明度。