div内嵌div时，onmouseover和onmouseout响应问题
html代码：<divclass='frame'onmouseover="show(this,event)"onmouseout="divHide(this)"style...
html代码：
<div class='frame' onmouseover="show(this,event)" onmouseout="divHide(this)" style="width: 200px;height:200px;">
<div class="in" onmouseover="showIn(this,event)" onmouseout="divHide(this)" style="width: 100px;height:100px;margin: auto;">
</div>
js代码如下：
function show(it,ev){
var left = ev.clientX+document.body.scrollLeft - document.body.clientLeft;
var top = ev.clientY+ document.body.scrollTop - document.body.clientTop;
var str = "<div style='cursor: pointer;z-index: 120;background: #cc9999;position: absolute;top: "+top+"px;left: "+left+"px;'><div>frame</div></div>";
$("#intro").html(str);
}
function showIn(it,ev){
var left = ev.clientX+document.body.scrollLeft - document.body.clientLeft;
var top = ev.clientY+ document.body.scrollTop - document.body.clientTop;
var str = "<div style='cursor: pointer;z-index: 120;background: #cc9999;position: absolute;top: "+top+"px;left: "+left+"px;'><div>in</div></div>";
$("#intro").html(str);
}
function divHide(it){$("#intro").html("");}
在这样代码的情况下，是两个div，frame和in，in在frame里，鼠标移到frame div上时，无论是否移到in div上，都只显示show(it,ev)的效果，我希望鼠标移到frame div上、in div外时显示show(it,ev)的效果，而移到in div上时显示showIn(it,ev)的效果，可以实现吗？怎么修改代码？ 展开
<div class='frame' onmouseover="show(this,event)" onmouseout="divHide(this)" style="width: 200px;height:200px;">
<div class="in" onmouseover="showIn(this,event)" onmouseout="divHide(this)" style="width: 100px;height:100px;margin: auto;">
</div>
js代码如下：
function show(it,ev){
var left = ev.clientX+document.body.scrollLeft - document.body.clientLeft;
var top = ev.clientY+ document.body.scrollTop - document.body.clientTop;
var str = "<div style='cursor: pointer;z-index: 120;background: #cc9999;position: absolute;top: "+top+"px;left: "+left+"px;'><div>frame</div></div>";
$("#intro").html(str);
}
function showIn(it,ev){
var left = ev.clientX+document.body.scrollLeft - document.body.clientLeft;
var top = ev.clientY+ document.body.scrollTop - document.body.clientTop;
var str = "<div style='cursor: pointer;z-index: 120;background: #cc9999;position: absolute;top: "+top+"px;left: "+left+"px;'><div>in</div></div>";
$("#intro").html(str);
}
function divHide(it){$("#intro").html("");}
在这样代码的情况下，是两个div，frame和in，in在frame里，鼠标移到frame div上时，无论是否移到in div上，都只显示show(it,ev)的效果，我希望鼠标移到frame div上、in div外时显示show(it,ev)的效果，而移到in div上时显示showIn(it,ev)的效果，可以实现吗？怎么修改代码？ 展开
3个回答
展开全部
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title><style>
</style>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$(".frame").on({
mouseover:function(){
$("#text").text("frame");
},
mouseout:function(){
$("#text").empty();
}
});
$(".in").on({
mouseover:function(e){
//用e.stopPropagation()防止冒泡
e.stopPropagation()
$("#text").text("in");
},
mouseout:function(){
$("#text").empty();
}
});
});
</script>
</head>
<body>
<div class='frame' style="width: 200px;height:200px; background:#F60">
<div class="in" style="width: 100px;height:100px;margin: auto;background:#06F">
</div>
</div>
<div id="text"></div>
</body>
</html>
我用JQ写法给你举个例子吧，主要就在e.stopPropagation()
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
微测检测5.10
2023-05-10 广告
您好！建议咨 深圳市微测检测有限公司，已建立起十余个专业实验室，企业通过微测检测就可以获得一站式的测试与认 证解决方案；(EMC、RF、MFi、BQB、QI、USB、安全、锂电池、快充、汽车电子EMC、汽车手机互 联、语音通话质量），认证遇...
点击进入详情页
本回答由微测检测5.10提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
