IE7/Quirks 模式子 Div 悬停问题答案

【问题标题】：IE7/Quirks Mode Child Div Hover ProblemIE7/Quirks 模式子 Div 悬停问题
【发布时间】：2011-09-22 08:43:17
【问题描述】：

效果：

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

简单代码：

CSS

td {
    position:relative;
    width:30px;
}

.hovering_box { 
    display:none;
    position:absolute;
    margin-left:25px;
}

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

.hovering_box:hover {
    display:block;
}

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <table>
    <tr>
      <td class='slot'>
        <div class='hovering_box'>
          <span class='box_title'>Title Here</span>
          <span class='box_message'>Help me!</span>
          <button>OK!</button>
        </div>
      </td>
    </tr>
  </table>
</html>

【问题讨论】：

我不知道你的例子是否真的有帮助：jsfiddle.net/Ew9GU（它没有显示任何悬停...）
对不起-我试图简化它，显然我错过了一些东西。这是一个更好的演示：jsfiddle.net/Ew9GU/8
请看这个：tinypic.com/r/4i0tg9/7 - 我在它旁边的 TD 中添加了颜色，并且 div 显示在 div 下方……这是在 IE7 模式下。我注意到在 div 旁边添加另一个列单元格时，当鼠标进入下一个 TD 时，div 消失了。上面的链接说明了效果。

标签： css html internet-explorer-7 hover html-table

【解决方案1】：

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;
}

【讨论】：

谢谢！我不应该把 IE6 放在那里，对不起 :) 这是一个 IE7 的问题，因为它已经支持悬停功能，我不想使用 jQuery。
@Psyborg：您的"better demo" jsFiddle 已经在IE7 中工作。但是，如果 IE7 处于 Quirks 模式，它将无法工作。如果是这种情况，那么@Lime 的 jQuery 修复程序或我的答案中的 What:hover 都会修复它。
谢谢。我从不应该相信 IE 开发人员工具来呈现 IE7 内容。
它不能是怪癖模式，因为在怪癖模式下，由于@Psyborg 所说的“悬停”事情，该框根本不会出现，该框实际上出现但随后消失您尝试将鼠标悬停在框本身上..（我假设单击按钮？） - 就像@thirtydot 我让示例在 IE7 中工作，我想也许这里没有一些代码（可能是背景更改？）实际上可能正在触发一个 haslayout 错误

【解决方案2】：

正如@Lime 正确指出的那样，IE6 不支持:hover 对a 以外的元素。

为了解决这个问题，我建议你使用Whatever:hover：

Whatever:hover 是一个小脚本自动修补:hover, :active :focus 用于 IE6、IE7 和 IE8 怪癖，让你像你一样使用它们将在任何其他浏览器中。

我认为这比滚动您自己的 :hover 仿真更清洁、更容易。

【讨论】：

+1 是的，这是一个不错的选择，但我认为它因每个用户而异。例如，如果他已经在使用 jQuery，那么它可能会带来额外的开销。像这样链接到文件的标题也会变得棘手。整体好主意
@Lime：jQuery 修复是一个有效的选项（我已经使用它myself before [检查 cmets]），并且您已经收到了我的 +1 :) 但是，请考虑：这个修复是通过带有behavior: url("csshover3.htc") 的CSS 插入的，所以只有IE 会下载它——它会（..或应该）被缓存，所以它只需要下载一次。它自动修复:hover的所有实例，而不是你必须到处手动用额外的JavaScript修补:hover的每个实例 和额外的CSS。
是的，行为也与当前文档相关，这有点奇怪。 MS在想什么？！？总的来说，两者都可以工作;)
whatever:hover，虽然很精彩，但实际上可以用单个规则上的直接行为取代 - 为什么在行为可以进一步缩小时调用所有元素的行为 - 并通过 CSS仍然被缓存！ ;)