19

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

我可以将鼠标悬停在 Chrome 和 FireFox 中的空父 div 上，一切正常。IE 要求我在里面有某种文本可以悬停在上面。div 悬停事件不会仅以空 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 容器中。子 div 被 jQuery 隐藏，带有一些悬停输入/输出事件。父 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; }
4

13 回答 13

29

如果您设置背景颜色或边框，它将起作用 ......

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

（背景图像似乎是最不显眼的解决方案）

于 2010-01-29T00:13:08.373 回答
15

没有评论和过滤器对我有用。div 永远不会被渲染，所以不可能悬停。

终极解决方案：

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

带有一像素透明 gif 图像。当然可以！

于 2011-02-07T16:03:44.450 回答
5

我知道问题已得到解答，但我遇到了同样的问题。空 div 不会触发该函数。如果它有边框，则只有边框本身会启动该功能。我尝试了很多东西，没有任何帮助。这是我的解决方案，几乎相同，唯一的一点是我没有使用图像。将此添加到您的 CSS 中：

div { /* 在此处写入元素的名称、类或 id */
背景：#FFF；/* 你可以选择任何你喜欢的颜色，1.0-完全可见 */
不透明度：0.0；/* 除 IE 以外的所有浏览器的不透明度设置 */
过滤器：阿尔法（不透明度= 0）；/* IE 的不透明度设置，0-透明 & 100-完全可见 */
}
于 2010-08-22T00:27:40.783 回答
2

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

于 2013-07-12T11:26:38.133 回答
1

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

background:#000;
background:rgba(0,0,0,0);
filter:alpha(opacity=0);
于 2011-01-06T11:38:38.643 回答
0

我发现在一个区域上浮动鼠标事件跟踪 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 px 向左或向右移动，我会提供适当的图像可见性，同时隐藏所有其他人，宾果游戏你有一个动画。（空的 div 在所有非 IE 浏览器中都可以正常工作，但这在 IE 和非 IE 中都可以正常工作，因此无需两种方式编写。）

于 2012-01-13T00:23:16.000 回答
0 
.trasnparentIE
{
    background: url(../images/largeTransparent.gif) repeat;
}

when I added the border the hover event only fired when the mouse was over or very close to the border but i dont need the border so i just use of transparent background and it works for me ... the transparent background did the trick for me (comments and nbsp didn't work either...)

于 2013-05-03T10:48:59.853 回答
0

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

于 2010-01-29T00:00:25.357 回答
0

只需在“空”元素中插入一个空注释。:)

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

这将强制 IE 呈现元素

于 2010-01-29T00:11:23.810 回答
0

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

于 2010-01-29T00:26:37.703 回答
0

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

{
    background: white;
    opacity: 0;
}
于 2013-05-04T17:19:55.013 回答
0

我能够使用“盲文模式空白”，它是一个不可见的非空白字符，仍然“存在”，占用空间，并允许鼠标​​悬停等事件仍然触发。下面的代码片段显示了这一点（div 不是零宽度，因为它是空的或仅包含空格）：

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

于 2019-08-14T21:17:59.957 回答
-1

如果你不必支持IE6。在您的图形程序 (Photoshop) 中创建一个 1x1 的白框图像。将不透明度降低到 1%。另存为 PNG24 或 GIF。然后，将此作为透明 DIV 的背景图像。

这可以解决问题并保留任何子元素的不透明度。

于 2012-03-22T18:40:04.217 回答