IE7 / Quirks模式儿童Div悬停问题
[英]IE7/Quirks Mode Child Div Hover Problem
问题描述
Effect: 
影响：
A hovering box with text and a button that appears when you hover over the TD element. 当您将鼠标悬停在TD元素上时，将出现一个带有文本的悬停框和一个按钮。 In IE 7 the box will appear but disappears as soon as you try to hover over it. 在IE 7中，当您将鼠标悬停在该框上时，该框将出现但消失。 IE8+/FF/Ch/Sf all allow you to hover over the child DIV fine. IE8 + / FF / Ch / Sf都允许您将鼠标悬停在子DIV罚款之上。 What am I doing wrong? 我究竟做错了什么？
Simple code: 简单的代码：
CSS 的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 的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>
2 个解决方案
解决方案1
5 已采纳 2011-06-24 21:23:13
IE6 doesn't support hover on elements other then links, so you will have to use javascript to support IE6. IE6不支持将鼠标悬停在链接以外的其他元素上，因此您必须使用JavaScript来支持IE6。 I would advise just using some jQuery to kick IE6 and IE7 into compatibility. 我建议只使用jQuery将IE6和IE7兼容。
$('td .slot').hover(function(){
$(this).addClass('hover');
},function(){
$(this).removeClass('hover');
});
Then modify your css like so. 然后像这样修改您的CSS。
td .slot:hover .hovering_box,td .slot.hover .hovering_box {
display:block;
}
.hovering_box:hover,.hovering_box.hover {
display:block;
}
解决方案2
2 2011-06-24 21:25:48
As @Lime correctly stated, IE6 doesn't support :hover on elements other than a . 作为@Lime正确地指出，IE6不支持:hover上比其他元素a 。
To remedy this, I recommend that you use Whatever:hover : 为了解决这个问题，我建议您使用Whatever：hover ：
Whatever:hover is a small script that automatically patches
:hover,:activeand:focusfor IE6, IE7 and IE8 quirks, letting you use them like you would in any other browser.:hover，:active和:focus，使您像在其他任何浏览器中一样使用它们。
I think that this is a cleaner and easier option than rolling your own :hover emulation. 我认为这是比滚动自己的:hover仿真更干净，更容易的选择。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.