想问是不是跟冒泡事件有关？(百度了很多也不知道怎么解决)
谢了！
代码如下
<!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>
8 个解决方案
#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
我试过了，那样的话只有IE能够显示移入与移出的效果，火狐就不行了，火狐会停留在移入效果，鼠标移开不会复原。
#3
那样你的写法也行, 没反应是因为你的函数名称写错了吧
onmouseover="changeSize(this)"
function chageSize(obj) //应该是function changeSize(obj)
#4
粗心~~~~
#5
惭愧！！
#6
我加上伪类后一切OK，跪谢了！
#7
蹭分 结贴是对回帖人最后的感谢
#8
楼主和我一样，都是喜欢粗心~
#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
我试过了，那样的话只有IE能够显示移入与移出的效果，火狐就不行了，火狐会停留在移入效果，鼠标移开不会复原。
#3
那样你的写法也行, 没反应是因为你的函数名称写错了吧
onmouseover="changeSize(this)"
function chageSize(obj) //应该是function changeSize(obj)
#4
粗心~~~~
#5
惭愧！！
#6
我加上伪类后一切OK，跪谢了！
#7
蹭分 结贴是对回帖人最后的感谢
#8
楼主和我一样，都是喜欢粗心~