Css IE7/Quirks模式子Div悬停问题

效果：

一个带有文本和按钮的悬停框，当您将鼠标悬停在TD元素上时会显示该框。在IE 7中，框将出现，但当您尝试将鼠标悬停在框上时，框将消失。IE8+/FF/Ch/Sf全部允许您将鼠标悬停在child DIV上。我做错了什么

简单代码：

CSS

HTML

---

IE6不支持将鼠标悬停在链接以外的元素上，因此您必须使用javascript来支持IE6。我建议只使用一些jQuery将IE6和IE7引入兼容性

$('td .slot').hover(function(){
    $(this).addClass('hover');
},function(){
    $(this).removeClass('hover');
});

然后像这样修改css

td .slot:hover .hovering_box,td .slot.hover .hovering_box {
    display:block;
}

.hovering_box:hover,.hovering_box.hover {
    display:block;
}

---

正如@Lime正确指出的，IE6不支持：将鼠标悬停在a以外的元素上

要解决此问题，我建议您使用：

不管怎样：hover是一个小脚本 自动修补程序：悬停，：活动 和：关注IE6、IE7和IE8 怪癖，让你像你一样使用它们 将在任何其他浏览器中显示

---

我认为这是一个比滚动自己的：悬停模拟更干净、更容易的选择。

我不知道你的示例是否真的有用：它没有显示任何悬停的内容……对不起，我试图简化它，显然我遗漏了一些东西。这是一个更好的演示：请看这个：-我给它旁边的TD添加了颜色，div显示在div下面…这是IE7模式。我注意到，当在div旁边添加另一个列单元格时，当鼠标进入下一个TD时，div就会消失。上面的链接说明了效果。谢谢！我不应该把IE6放在那里，对不起：这是IE7的问题，因为它已经支持悬停函数了，所以我不想使用jQuery。@Psyborg:Your已经在IE7中工作了。然而，如果IE7处于怪癖模式，它将无法工作。如果是这样的话，那么@Lime的jqueryfix，或者其他：我的答案中的hover将修复它。谢谢。我不应该相信IE开发者工具来呈现IE7内容。这不能是怪癖模式，因为在怪癖模式下，框根本不会出现，因为悬停的东西@Psyborg say有问题。框实际上出现了，但当你尝试悬停在框上时，框就会消失。我想点击按钮？-比如@thirtydot，我在IE7中使用了这个示例，我想可能有一些代码没有在这里，背景可能有变化？这实际上可能会触发haslayout错误+1是的，这是一个很好的选择，但我认为每个用户的情况不同。例如，如果他已经在使用jQuery，那么它可能会带来额外的开销。此外，标题也会变得棘手，将链接到像这样的文件。总的来说很好idea@Lime：jQuery修复程序是一个有效的选项，我已经使用了它[检查注释]，您已经从我这里获得了+1：但是，请考虑：此修复程序是通过CSS插入的，行为为：urlcsshover3.htc，因此只有IE才会下载它-并且它将..或者应该被缓存，因此只需下载一次。它会自动修复：hover的所有实例，而无需你到处使用额外的JavaScript和CSS手动修补：hover的每个实例。是的，行为也与当前文档相关，这有点奇怪。她在想什么？！？总的来说，两者都会起作用；不管怎样：hover，虽然很好，但实际上可以用一条规则上的直接行为来代替它——当行为可以进一步缩小时，为什么要调用所有元素的行为——并且通过仍然被缓存的CSS；

$('td .slot').hover(function(){
    $(this).addClass('hover');
},function(){
    $(this).removeClass('hover');
});

td .slot:hover .hovering_box,td .slot.hover .hovering_box {
    display:block;
}

.hovering_box:hover,.hovering_box.hover {
    display:block;
}