将鼠标悬停在完整的 div 上时，在 IE 中悬停不起作用答案

【问题标题】：Hover in IE not working when hovering over full div将鼠标悬停在完整的 div 上时，在 IE 中悬停不起作用
【发布时间】：2010-08-30 11:24:45
【问题描述】：

我正在使用 jquery addClass 代码在滚动 div 时显示/隐藏元素。在所有浏览器中它都有效，但在 IE 中它仅在我翻转某些文本时有效，而不是完整的 div。

所以在这个例子中，如果我翻转主 div 的显示文本部分，隐藏文本 div 将显示。但是如果我将鼠标移到两个浮动 div 之间的空间（现在有文本或任何内容），悬停不起作用。

更新：下面的代码似乎工作，但我的生产代码没有。请参考此链接：jsfiddle.net/H2anm/5 有一些损坏的图像等，但是如果您将鼠标悬停在用户名右侧的空白处，位置坐标和 Pref.brand: Gamehouse.. 或一些在共享/书签链接周围的空白处，div 折叠并且按钮/bgcolor 更改消失。

javascript：

$(function() {
$("div.DivThatsTriggeredOnRollover").hover( 
function() {  $("div.hiddentext").addClass("hiddentextShow"); },
function() { $("div.hiddentext").removeClass("hiddentextShow"); });
});

伪html代码：

<div class="DivThatsTriggeredOnRollover" style="width:500px;">

<div id="showingtext" style="float:left;width:100px;">
here is showing text
</div>

<div class="hiddentext" style="float:right;width:100px;">
here is hidden text
</div>

</div>

【问题讨论】：

标签： jquery html hover

【解决方案1】：

实际上，一切都按预期工作（在 IE6-7-8 中测试）：

http://jsfiddle.net/ZDyyU/

如果您将鼠标悬停在 .DivThatsTriggeredOnRollover 内的任何内容上，则当您将鼠标移出时，.hiddentext 将显示和隐藏。 .showingtext 与此无关，它就在那里。

【讨论】：

哇，这是一个很棒的工具。我已经更新了生产代码。我可以将此工具设置为 IE/FF 或任何其他浏览器吗？还是我必须在那个特定的浏览器中使用它？这对你仍然在 IE 中有用吗？ jsfiddle.net/H2anm/1
好吧，无论你用什么浏览器打开它，你都会看到它在其中的表现。是的，您的产品代码在 IE6-7-8 中对我有用：只要您将鼠标悬停在容器上，“共享书签”就会出现。
请查看更新。当您滚动上方的指定空格（用户名/坐标/pref.brand 右侧）或滚动共享/书签按钮周围的空白时，它是否有效？
很抱歉，您不希望这里的人调试您的生产代码，是吗？您的 JS 代码运行良好，我已经通过示例进行了演示。现在你只需要弄清楚你的标记的哪一部分搞砸了（删除一个标签 -> 刷新 -> 检查 -> 重复）并努力解决问题。

【解决方案2】：

事实证明，在 IE7 中，如果您在一个较大的 div 中有多个浮点数，并且您在其中一个内部浮动 div 中指定了宽度，那么 have to specify a width in the outermost ones 也是如此。我不确定为什么会这样，但它已在我的代码版本中修复：http://jsfiddle.net/H2anm/8/

我需要为整个外部 div 指定一个宽度，因为我已经为灰色 div 指定了一个宽度。在此之前，如果我滚出红色/灰色，悬停翻转不起作用。

【讨论】：

【解决方案3】：

您的代码似乎很完美。不知道怎么回事

http://jsbin.com/udaqi4

【讨论】：

谢谢，我的示例有效，但不是我的生产代码。请参阅上面的更新，我包含了一个链接