随手写的，仅供参考
<html>
<head>
<title>test</title>
<style>
.big{
height:300px;
width:800px;
border:dashed;
}
.little{
height:100px;
width:100px;
left:200px;
border:dashed;
}
</style>
<script type="text/javascript">
var inBig = false;
var inLittle = false;
function littleIn()
{
debug("in littleIn!");
inLittle = true;
inBig = true;
setStatus();
}
function littleOut()
{
debug("in littleOut!");
inLittle = false;
inBig = true;
setStatus();
}
function bigIn()
{
debug("in bigIn!");
inBig = true;
setStatus();
}
function bigOut()
{
debug("in bigOut");
inBig = false;
setStatus();
}
function setStatus()
{
var status = document.getElementById("status");
status.innerHTML="";
status.innerHTML="is mouse in the big div? "+ inBig;
status.innerHTML+="<br />is mouse in the little div? "+ inLittle;
if(inBig)
{
document.getElementById("big").style.opacity=0.4;
}
else
{
document.getElementById("big").style.opacity=1;
}
}
function debug(msg)
{
var debug = document.getElementById("debug");
debug.innerHTML+="<br />"+msg;
}
</script>
</head>
<body>
something before the big div
<div class="big" id="big" onmouseover="bigIn()" onmouseout="bigOut()">
something before the little div
<div class="little" onmouseover="littleIn()" onmouseout="littleOut()">
something in the little div
</div>
something after the little div
</div>
something after the big div
<div style="border:dotted">
this is the status console
<div id="status">
</div>
this is the debug console
<div id="debug">
</div>
</div>
</body>
</html>
【 在 KDr2 (Killy Draw) 的大作中提到: 】
: 【 以下文字转载自 WebDev 讨论区 】
: 发信人: KDr2 (Killy Draw), 信区: WebDev
: 标 题: mouseout/in和嵌套的div。。。
: ...................
--
FROM 202.108.12.*