Question

JSFiddle链接：http://jsfiddle.net/2JUEJ

当我在IE8中打开页面时发生的情况是，只要鼠标进入容器DIV（class = tableRow），其第一个子DIV（class = tile / wideTile / longTile）的hover事件就会触发。在Fx中工作正常。我尝试在父级event.preventDefault();事件中使用hover，但这并不能解决问题。有线索吗？

Answer 1

float:left班is incompatible上display:table-cell和.tile的组合。设置float会自动将显示设置为块。看一下Chrome或Firebug / Firefox中的计算样式。

甚至可能是浮动表格单元实际上导致浏览器生成anonymous table objects，导致IE8中的渲染错误。我猜Chrome / Firefox正在以不同的方式解释不兼容性。

删除display:table-row会导致IE更好地渲染单元格，因为当将鼠标悬停在其他行子节点上时，不会再触发第一个单元格的悬停事件。然而，这打破了预期的布局，因此我建议使用新的方法。

首先删除所有display:table-*规则，因为所有内容都已浮动（正如我已经说过设置display:block）并且由于所有内容都已浮动，因此每个table都需要一个宽度，否则所有元素将彼此水平放置。例如，我在420px类上尝试了.table。

See demo

注意：就我个人而言，我会更好地移除浮子，只使用display:inline-block;vertical-align:top和可能的定位组合，因为浮动通常需要额外的规则和/或标记来清除（我从来没有喜欢CSS浮动！）

您可能有用的其他问题解释了这个答案的部分内容：

Answer 2

尝试使用这种方式：

$(document).ready(function() {
    $(".title").hide();
    $(".tile, .wideTile, .longTile").hover(function() {
       $("div[class=title]", this).stop().slideDown("fast");
    }, function() {
       $("div[class=title]", this).stop().slideUp("fast");
    });
});

尝试使用此脚本，看看这是否有帮助。

Answer 3

事件从子传播到父级。在子div hadlers中尝试event.stopPropagation（）。

IE8 + jQuery：父DIV触发第一个孩子的HOVER事件

3 个答案: