菜鸟求助 onmouseover与onmouseout没反应

想实现鼠标移动到A区，A区变大，结果...没反应
想问是不是跟冒泡事件有关？(百度了很多也不知道怎么解决)
谢了！
代码如下<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1</title>
<style type="text/css">
* {
margin:0;
border:0;
}
div {
background-color:yellow;
z-index: -1;
}
#div_0 {
border:black solid 0px;
position:absolute;
left:500px;
top:150px;
text-align:center;
width:400px;
height:400px;
background-color: white;
}
#div_1 {
position:absolute;
left:0;
top:0;
width:150px;
height:240px;
margin:0 10px 10px 0;
} #div_2 {
float:right;
width: 240px;
height:100%;
}
#div_3 {
position:absolute;
left:0;
bottom:0;
width:150px;
height:150px;
}
</style>
</head>
<body>
<div id="div_0">
<div id="div_1" onmouseover="changeSize(this)" onmouseout="recoverSize(this)">A</div>
<div id="div_2">B</div>
<div id="div_3">C</div>
</div>

<script type="text/javascript">
function chageSize(obj){
obj.style.border = "black solid 1px";
obj.style.width = "200px";
obj.style.height = "300px";
obj.style.zIndex = 1;
obj.style.backgroundColor = "green";
}
function recoverSize(obj){
obj.style.border = "";
obj.style.width = "";
obj.style.height = "";
obj.style.backgroundColor = "";
}
</script>
</body></html>
onmouseoveronmouseout

解决方案 »

  1.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>1</title>
    <style type="text/css">
    * {
    margin:0;
    border:0;
    }
    div {
    background-color:yellow;
    z-index: -1;
    }
    #div_0 {
    border:black solid 0px;
    position:absolute;
    left:500px;
    top:150px;
    text-align:center;
    width:400px;
    height:400px;
    background-color: white;
    }
    #div_1 {
    position:absolute;
    left:0;
    top:0;
    width:150px;
    height:240px;
    margin:0 10px 10px 0;
    } #div_1:hover{
    position:absolute;
    left:0;
    top:0;
    width:200px;
    height:300px;
    margin:10px 10px 10px 0;
    border:black solid 1px;
    background-color:green;
    z-index: 1;
    }
    #div_2 {
    float:right;
    width: 240px;
    height:100%;
    }
    #div_3 {
    position:absolute;
    left:0;
    bottom:0;
    width:150px;
    height:150px;
    }
    </style>
    </head>
    <body>
    <div id="div_0">
    <div id="div_1">A</div>
    <div id="div_2">B</div>
    <div id="div_3">C</div>
    </div>
    </body></html>可以直接在样式那里加个hover的伪类
      

  2.   

    那样你的写法也行, 没反应是因为你的函数名称写错了吧
    onmouseover="changeSize(this)"
    function chageSize(obj) //应该是function changeSize(obj)
      

  3.   

    那样你的写法也行, 没反应是因为你的函数名称写错了吧
    onmouseover="changeSize(this)"
    function chageSize(obj) //应该是function changeSize(obj)

    惭愧！！