IE7 /怪癖模式儿童分区悬停问题

悬停框中有文字和悬停在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>

来源

2011-06-24 Psyborg

我不知道你的例子是否真正有用：http://jsfiddle.net/Ew9GU/（它没有显示任何东西悬停在...） –

对不起 - 我试图简化它，显然我错过了什么。这是一个更好的演示：http://jsfiddle.net/Ew9GU/8/ – Psyborg

请看看这个：http://tinypic.com/r/4i0tg9/7 - 我在TD旁边添加了颜色， div显示在div下面...这是在IE7模式下。我注意到在div旁边添加另一个列单元格时，当鼠标进入下一个TD时，div消失。上面的链接说明了效果。 – Psyborg

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

来源

2011-06-24 21:23:13 William

谢谢！我不应该把IE6放在那里，对不起:)这是一个IE7问题，因为它已经支持悬停功能，所以我不想使用jQuery。 – Psyborg

@Psyborg：你的[“更好的演示”jsFiddle]（http://jsfiddle.net/Ew9GU/8/）已经可以在IE7中使用。但是，如果IE7处于怪癖模式，它将无法工作。如果是这样的话，那么无论是@ Lime的jQuery修复还是无论如何：从我的答案悬停将修复它。 – thirtydot

谢谢。我从来不应该信任IE开发者工具来呈现IE7内容。 – Psyborg

作为@Lime正确地指出，IE6不上比a其它元件支持:hover。

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

不管：悬停是一个小脚本，自动修补:hover，:active 和:focus为IE6，IE7和IE8 怪癖，让您使用他们喜欢你会在任何其他浏览器。

我认为这是一个比滚动自己的:hover仿真更清洁和更容易的选项。

来源

2011-06-24 21:25:48 thirtydot

+ 1是的，这是一个很好的选择，但我认为它根据每个用户而不同。例如，如果他已经在使用jQuery，那么它可能会带来额外的开销。此外，标题可能会变得棘手将链接到像这样的filse。整体好主意 – William

@Lime：jQuery修复是一个有效的选项（我已经使用它[我之前]（http://stackoverflow.com/questions/5998676/5998791#5998791）[检查评论]）和你已经有我的+1 :)但是，考虑：这个修正是通过CSS插入'behavior：url（“csshover3.htc”）'，所以只有IE会下载它 - 它会是（..或应该是）缓存，所以它只需要下载一次。 *自动*修复'：hover'的所有实例，而不是必须手动*使用额外的JavaScript *和*额外的CSS手动修补'：hover'的每个实例*。 – thirtydot

也行为是相对于当前的文件，这是很奇怪。 MS在想什么？！？总的来说，两者都有效;） – William

IE7 /怪癖模式儿童分区悬停问题

回答

相关问题