菜鸟求助 onmouseover与onmouseout没反应

时间:2022-11-06 07:57:00
想实现鼠标移动到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>


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


引用 2 楼 u011698981 的回复:
我试过了,那样的话只有IE能够显示移入与移出的效果,火狐就不行了,火狐会停留在移入效果,鼠标移开不会复原。

那样你的写法也行, 没反应是因为你的函数名称写错了吧


onmouseover="changeSize(this)"
function chageSize(obj) //应该是function changeSize(obj)

#4


粗心~~~~      

#5


引用 3 楼 no200830740203 的回复:
Quote: 引用 2 楼 u011698981 的回复:

我试过了,那样的话只有IE能够显示移入与移出的效果,火狐就不行了,火狐会停留在移入效果,鼠标移开不会复原。

那样你的写法也行, 没反应是因为你的函数名称写错了吧


onmouseover="changeSize(this)"
function chageSize(obj) //应该是function changeSize(obj)

惭愧!! 菜鸟求助 onmouseover与onmouseout没反应

#6


我加上伪类后一切OK,跪谢了! 菜鸟求助 onmouseover与onmouseout没反应

#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


引用 2 楼 u011698981 的回复:
我试过了,那样的话只有IE能够显示移入与移出的效果,火狐就不行了,火狐会停留在移入效果,鼠标移开不会复原。

那样你的写法也行, 没反应是因为你的函数名称写错了吧


onmouseover="changeSize(this)"
function chageSize(obj) //应该是function changeSize(obj)

#4


粗心~~~~      

#5


引用 3 楼 no200830740203 的回复:
Quote: 引用 2 楼 u011698981 的回复:

我试过了,那样的话只有IE能够显示移入与移出的效果,火狐就不行了,火狐会停留在移入效果,鼠标移开不会复原。

那样你的写法也行, 没反应是因为你的函数名称写错了吧


onmouseover="changeSize(this)"
function chageSize(obj) //应该是function changeSize(obj)

惭愧!! 菜鸟求助 onmouseover与onmouseout没反应

#6


我加上伪类后一切OK,跪谢了! 菜鸟求助 onmouseover与onmouseout没反应

#7


蹭分  结贴是对回帖人最后的感谢

#8


楼主和我一样,都是喜欢粗心~