jquery hover事件如何不冒泡
时间：2010-05-25
来源：互联网
jquery hover事件如何不冒泡
每个div鼠标经过时div背景颜色变化，但不想让镶嵌的div的父div变色，如何做？
听说是什么冒泡事件，不懂。
demo:
http://skyming.13.bname.us/question/div_hover.htm
每个div鼠标经过时div背景颜色变化，但不想让镶嵌的div的父div变色，如何做？
听说是什么冒泡事件，不懂。
demo:
http://skyming.13.bname.us/question/div_hover.htm
复制内容到剪贴板
<script type="text/javascript">
function div_hover(){
$("div").hover(
function(){
$(this).addClass("hover");
},
function(){
$(this).removeClass("hover");
}
);
}
$(function(){
div_hover();
});
</script>
<style type="text/css">
.box1{background:green;width:400px;height:400px;}
.box2{background:yellow;width:300px;height:300px;}
.box3{background:#cc3333;width:200px;height:200px;}
.hover{background:#33cc33}
</style>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
代码:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript">
function div_hover(){
$("div").hover(
function(){
$(this).addClass("hover");
},
function(){
$(this).removeClass("hover");
}
);
}
$(function(){
div_hover();
});
</script>
<style type="text/css">
.box1{background:green;width:400px;height:400px;}
.box2{background:yellow;width:300px;height:300px;}
.box3{background:#cc3333;width:200px;height:200px;}
.hover{background:#33cc33}
</style>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
作者: linjuming 发布时间: 2010-05-25
$("div").hover(
function(e){
$(this).addClass("hover");
e.stopPropagation(); //这里
},
function(e){
$(this).removeClass("hover");
e.stopPropagation(); //这里
}
);
注意，事件处理函数要传递一个事件对象e
function(e){
$(this).addClass("hover");
e.stopPropagation(); //这里
},
function(e){
$(this).removeClass("hover");
e.stopPropagation(); //这里
}
);
注意，事件处理函数要传递一个事件对象e
作者: aolu11 发布时间: 2010-05-26
e.stopPropagation(); 直接放进去没效果嘛？忘2楼给个运行版看看
作者: cwq2jxl 发布时间: 2010-05-26
结果出来了，很复杂
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> function div_hover(){ var levels = {}; var min = 100, max = 0; var change = function() { var q = 0; for (var p in levels) { $(levels[p]).removeClass("hover"); q = Math.max(q, p); } $(levels[q]).addClass("hover"); }; var getLevel = function(element) { var level = 0; for (var parent = element; parent.parentNode; parent = parent.parentNode) level++; return level; }; $("div").hover( function(){ levels[getLevel(this)] = this; change(); }, function(){ delete levels[getLevel(this)]; $(this).removeClass("hover"); change(); } ); } $(function(){ div_hover(); }); </script> <style type="text/css"> .box1{background:green;width:400px;height:400px;} .box2{background:yellow;width:300px;height:300px;} .box3{background:#cc3333;width:200px;height:200px;} .hover{background:#33cc33} </style> <div class="box1"> <div class="box2"> <div class="box3"></div> </div> </div>
提示：您可以先修改部分代码再运行
提示：您可以先修改部分代码再运行
作者: linjuming 发布时间: 2010-05-26
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> function div_hover(){ $("div").hover( function(e){ e=window.event||e; $(this).addClass("hover"); e.stopPropagation(); }, function(e){ e=window.event||e; $(this).removeClass("hover"); e.stopPropagation(); } ); } $(function(){ div_hover(); }); </script> <style type="text/css"> .box1{background:green;width:400px;height:400px;} .box2{background:yellow;width:300px;height:300px;} .box3{background:#cc3333;width:200px;height:200px;} .hover{background:#33cc33} </style> <div class="box1"> <div class="box2"> <div class="box3"></div> </div> </div>
提示：您可以先修改部分代码再运行
提示：您可以先修改部分代码再运行
作者: jiangliuhuo 发布时间: 2010-05-26
没有使用hover事件，但是效果一样，可以参考
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .box1{background:green;width:400px;height:400px;} .box2{background:yellow;width:300px;height:300px;} .box3{background:#cc3333;width:200px;height:200px;} .hover{background:#33cc33} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(function() { $("div").mouseover(function(e) { $(this).addClass("hover"); e.stopPropagation(); }); $("div").mouseout(function(e) { $(this).removeClass("hover"); e.stopPropagation(); }); }); </script> </head> <body> <div class="box1"> <div class="box2"> <div class="box3"></div> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行
提示：您可以先修改部分代码再运行
作者: sggtong 发布时间: 2010-05-26
哈哈，三个效果都不一样。有意思。
作者: beryl2008 发布时间: 2010-05-26
6#正解~
作者: cwq2jxl 发布时间: 2010-05-26
<script type="text/javascript">
$(function(){
$("div").bind({
mouseover:function(e){
$(this).addClass("hover");
e.stopPropagation();
},
mouseout:function(e){
$(this).removeClass("hover");
e.stopPropagation();
}
});
});
</script>
$(function(){
$("div").bind({
mouseover:function(e){
$(this).addClass("hover");
e.stopPropagation();
},
mouseout:function(e){
$(this).removeClass("hover");
e.stopPropagation();
}
});
});
</script>
作者: yiday 发布时间: 2010-05-28
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读：74
-
如何安装mysql8.0
阅读：31
-
Word快速设置标题样式步骤详解
阅读：28
-
20+道必知必会的Vue面试题（附答案解析）
阅读：37
-
HTML如何制作表单
阅读：22
-
百词斩可以改天数吗？当然可以，4个步骤轻松修改天数！
阅读：31
-
ET文件格式和XLS格式文件之间如何转化？
阅读：24
-
react和vue的区别及优缺点是什么
阅读：121
-
支付宝人脸识别如何关闭?
阅读：21
-
腾讯微云怎么修改照片或视频备份路径?
阅读：28
