移动到内部的对象上也会触发mouseout事件,要判断下移动到的对象是否包含在容器内 function contains(o, target) { if (o == target) return true; while (target = target.parentNode) if (target == o) return true; return false; } window.onload = function () { var divColor = document.getElementById("divColor"); divColor.onmouseout = function (e) { e = e || window.event; var o = e.toElement || e.relatedTarget; if (contains(this, o)) return false; this.style.display = "none"; } }
if (o == target) return true;
while (target = target.parentNode) if (target == o) return true;
return false;
}
window.onload = function () {
var divColor = document.getElementById("divColor");
divColor.onmouseout = function (e) {
e = e || window.event;
var o = e.toElement || e.relatedTarget;
if (contains(this, o)) return false;
this.style.display = "none";
}
}
{
event = event ? event : window.event;
var toEle = event.toElement ;
if (this == toEle.parentNode)
return false;
this.style.display = "none";
}
<html>
<head>
<meta charset="utf-8">
<style>
.mya #divColor{
display:none;
}
.mya:hover #divColor{
display: block;
}
</style>
</head><body>
<a href="#" class="mya" >
<div>颜色</div>
<div id="divColor">
<table border="1px" bordercolor="#FFFFFF" height="100px" width="100px" cellpadding="0px" cellspacing="0px">
<tr> <td bgcolor="#FFFFFF"></td> <td bgcolor="#000000"></td> <td bgcolor="#00A2E8"></td> <td bgcolor="#22B14C"></td> <td bgcolor="#3F48CC"></td> <td bgcolor="#7092BE"></td></tr>
<tr> <td bgcolor="#7F7F7F"></td> <td bgcolor="#880015"></td> <td bgcolor="#99D9EA"></td> <td bgcolor="#A349A4"></td> <td bgcolor="#B5E6ED"></td> <td bgcolor="#B97A57"></td></tr>
<tr> <td bgcolor="#C3C3C3"></td> <td bgcolor="#C8BFE7"></td> <td bgcolor="#ED1C24"></td> <td bgcolor="#EFE4AE"></td> <td bgcolor="#FF7F27"></td> <td bgcolor="#FF8080"></td></tr>
<tr> <td bgcolor="#FFAEC9"></td> <td bgcolor="#FFC90E"></td> <td bgcolor="#FFF200"></td> <td></td> <td></td> <td></td></tr>
</table>
</div>
</a>
</body>
</html>
这样处理吧
写代码就牵涉到这个层的显示 你提供的信息不足