ie8 多层div mouseout 闪烁问题

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>11</title>
<meta http-equiv="X-UA-Compatible" content="IE=8" >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="script/jquery-1.7.1.min.js"></script><script type="text/javascript">
function mouseover1(){
$("#mousediv1").css("display", "none");
$("#mousediv2").css("display", "block");
$("#mousediv2").css("background-color", "#efe2d2");
}function mouseout1(event){
$("#mousediv2").css("background-color", "");
$("#mousediv1").css("display", "block");
$("#mousediv2").css("display", "none");
}
function mouseover2(){
$("#mousediv11").css("display", "none");
$("#mousediv22").css("display", "block");
$("#mousediv22").css("background-color", "#efe2d2");
}function mouseout2(event){
$("#mousediv22").css("background-color", "");
$("#mousediv11").css("display", "block");
$("#mousediv22").css("display", "none");
}
function mouseover3(){
$("#mousediv111").css("display", "none");
$("#mousediv222").css("display", "block");
$("#mousediv222").css("background-color", "#efe2d2");
}function mouseout3(event){
$("#mousediv222").css("background-color", "");
$("#mousediv111").css("display", "block");
$("#mousediv222").css("display", "none");
}
</script>
</head>
<body>
<center>
        <div id="content_six">

        <div style="width: 480px;font-size: 13px;font-family: microsoft yahei;border-collapse: separate;   border-spacing:   8px;;">
        <div onMouseOver="mouseover1();"  id="mousediv1" style="height: 90px;display: block;">
         <div id="divEvent" style="position:absolute;width:480px;height:90px;z-index:2"></div>
        <div style="margin-left:28px;float:left;width:45px;font-size:50px;font-family: arial;color: #d1d1d1;" align="center">01</div>
        <div style="float:right;width:365px;" align="left">
         <div style="margin-top: 4px;float:left;height: 15px;width: 2px;background-color: blue;"></div>
         <div style="float:right;width:353px;">
         <div style="float:left;"><font style="font-size: 14px;color: #5c5f62;" >物流业亟须资源整合</font></div>
         <div style="float:right;margin-right:12px;"><font style="color: #9f9f9f;">2014/11/10</font></div>
         </div>
         <div style="color: #9f9f9f;margin-left: 12px;margin-top:25px;">半个多月的时间,全球前两大经济体以一种独特的方式诠释了现代物流的重要性。</div>
        </div>
        </div>
        <div onMouseOut="mouseout1();" id="mousediv2" id="mousediv2" style="height: 90px;display: none;">
        <div id="divEvent" style="position:absolute;width:480px;height:90px;z-index:2"></div>
        <div  style="float:right;width:365px;" align="left" id="mousediv2-2">
         <div   id="mousediv2-1" style="width:353px;">
         <div id="mousediv2-3" style="float:left;margin-left: -82px;"><a target="_blank" href="" style="font-size: 14px;color: #5c5f62;" >物流业亟须资源整合</a></div>
         <div id="mousediv2-4" style="float:right;"><font style="color: #9f9f9f;">2014/11/10</font></div>
         </div>
         <div  id="mousediv2-5" style="color: #9f9f9f;margin-left: -82px;;margin-top:25px;">半个多月的时间,全球前两大经济体以一种独特的方式诠释了现代物流的重要性。</div>
        </div>
        </div>
        </div>

        </div>
</center>
</body>
</html>
把事件添加到他们的父级就行了  或者设置个  延时器（setTimeout）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>11</title>
<meta http-equiv="X-UA-Compatible" content="IE=8" >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="script/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function mouseover1(){
    $("#mousediv1").css("display", "none");
    $("#mousediv2").css("display", "block");
    $("#mousediv2").css("background-color", "#efe2d2");
}

function mouseout1(event){
    $("#mousediv2").css("background-color", "");
    $("#mousediv1").css("display", "block");
    $("#mousediv2").css("display", "none");
}
function mouseover2(){
    $("#mousediv11").css("display", "none");
    $("#mousediv22").css("display", "block");
    $("#mousediv22").css("background-color", "#efe2d2");
}

function mouseout2(event){
    $("#mousediv22").css("background-color", "");
    $("#mousediv11").css("display", "block");
    $("#mousediv22").css("display", "none");
}
function mouseover3(){
    $("#mousediv111").css("display", "none");
    $("#mousediv222").css("display", "block");
    $("#mousediv222").css("background-color", "#efe2d2");
}

function mouseout3(event){
    $("#mousediv222").css("background-color", "");
    $("#mousediv111").css("display", "block");
    $("#mousediv222").css("display", "none");
}
</script>
</head>
<body>
<center>
<div id="content_six">
<div onMouseOver="mouseover1();"  onMouseOut="mouseout1();" style="width: 480px;font-size: 13px;font-family: microsoft yahei;border-collapse: separate;   border-spacing:   8px;;">
    <div  id="mousediv1" style="height: 90px;display: block;">
        <div id="divEvent" style="position:absolute;width:480px;height:90px;z-index:2"></div>
        <div style="margin-left:28px;float:left;width:45px;font-size:50px;font-family: arial;color: #d1d1d1;" align="center">01</div>
        <div style="float:right;width:365px;" align="left">
            <div style="margin-top: 4px;float:left;height: 15px;width: 2px;background-color: blue;"></div>
            <div style="float:right;width:353px;">
                <div style="float:left;"><font style="font-size: 14px;color: #5c5f62;" >物流业亟须资源整合</font></div>
                <div style="float:right;margin-right:12px;"><font style="color: #9f9f9f;">2014/11/10</font></div>
            </div>
            <div style="color: #9f9f9f;margin-left: 12px;margin-top:25px;">半个多月的时间,全球前两大经济体以一种独特的方式诠释了现代物流的重要性。</div>
        </div>
    </div>
    <div id="mousediv2" id="mousediv2" style="height: 90px;display: none;">
    <div id="divEvent" style="position:absolute;width:480px;height:90px;z-index:2"></div>
        <div  style="float:right;width:365px;" align="left" id="mousediv2-2">
            <div   id="mousediv2-1" style="width:353px;">
                <div id="mousediv2-3" style="float:left;margin-left: -82px;"><a target="_blank" href="" style="font-size: 14px;color: #5c5f62;" >物流业亟须资源整合</a></div>
                <div id="mousediv2-4" style="float:right;"><font style="color: #9f9f9f;">2014/11/10</font></div>
            </div>
            <div  id="mousediv2-5" style="color: #9f9f9f;margin-left: -82px;;margin-top:25px;">半个多月的时间,全球前两大经济体以一种独特的方式诠释了现代物流的重要性。</div>
        </div>
    </div>
</div>
</div>
</center>
</body>
</html>
这个才是对的。。

调试易

ie8 多层div mouseout 闪烁问题

解决方案 »