Question

效果：

当您将鼠标悬停在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>

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

Answer 2

正如@Lime所说，IE6不支持:hover以外的其他元素{/ 1}}。

要解决此问题，建议您使用Whatever:hover：

无论如何：悬停是一个小脚本自动修补a，:hover IE6，IE7和IE8的:active 怪癖，让你像你一样使用它们会在任何其他浏览器中。

我认为这比滚动自己的:focus模拟更简洁明了。

IE7 / Quirks模式Child Div Hover问题

2 个答案: