jquery hover事件如何不冒泡？

mingfish 2010-05-25 07:38:49
每个div鼠标经过时div背景颜色变化，但不想让镶嵌的div的父div变色，如何做？
听说是什么冒泡事件，不懂。

demo:
http://skyming.13.bname.us/question/div_hover.htm



<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>
...全文
970 15 打赏 收藏 转发到动态 举报
写回复
用AI写文章
15 条回复
切换为时间正序
请发表友善的回复…
发表回复
zhyzdl 2010-05-26
  • 打赏
  • 举报
 回复
帮顶。。。。。
王集鹄 2010-05-26
  • 打赏
  • 举报
 回复
没有嵌套关系就比较简单，可以考虑修改html和css实现。
<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;position:absolute;left:0;top:0;}

    .box2{background:yellow;width:300px;height:300px;position:absolute;left:0;top:0;}

    .box3{background:#c33;width:200px;height:200px;position:absolute;left:0;top:0;}

    .box4{background:#f0f;width:100px;height:100px;position:absolute;left:0;top:0;}

    .hover{background:#33cc33}

</style>

<div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>

<div class="box4"></div>
王集鹄 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:#c33;width:200px;height:200px;}

    .box4{background:#f0f;width:100px;height:100px;}

    .hover{background:#33cc33}

</style>

<div class="box1">

    <div class="box2">

        <div class="box3">

			<div class="box4"></div>

		</div>

    </div>

</div>
不知道还有没有更好的方法
mingfish 2010-05-26
  • 打赏
  • 举报
 回复
谢谢zswang哥，非常完美。

死神哥的代码不行，不过也谢谢了。
shan1119 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(){

                $(this).addClass("hover");

                if(window.event){   

                    window.event.cancelBubble = true;   

                }else{   

                    oEvent.stopPropagation();   

                }   

            },

            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>
yliu0 2010-05-26
  • 打赏
  • 举报
 回复 



$("p").click(function(event){

  event.stopPropagation();

  //blah blah

});
mingfish 2010-05-25
  • 打赏
  • 举报
 回复
谢谢，但我想要的是hover效果
北京不不 2010-05-25
  • 打赏
  • 举报
 回复
stopPropagation
passself 2010-05-25
  • 打赏
  • 举报
 回复 


<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>test</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 src="jquery-1.3.2.js"></script>

<script>

    $(function(){

        $("div").toggle(

            function(e){

				e.stopPropagation();

                $(this).addClass("hover");

				 

            },

            function(e){

				e.stopPropagation();

                $(this).removeClass("hover");

				 

            }

        );

    });

</script>



</head>



<body>

<div class="box1">111111

    <div class="box2">222222

        <div class="box3">3333333</div>

    </div>

</div>

</body>

</html>

hover事件不好测，用点击比较好测
mingfish 2010-05-25
  • 打赏
  • 举报
 回复
没用的


	function div_hover(){

		$("div").hover(

			function(e){

				e.stopPropagation();

				$(this).addClass("hover");

			},

			function(e){

				e.stopPropagation();

				$(this).removeClass("hover");

			}

		);

	}

lee_09 2010-05-25
  • 打赏
  • 举报
 回复
在绑定的事件function中加上参数event(事件对象),然后使用event.stopPropagation()停止事件冒泡
mingfish 2010-05-25
  • 打赏
  • 举报
 回复
cancelBubble()也没用
meible2007 2010-05-25
  • 打赏
  • 举报
 回复
有意思的题目，没遇见过，等待牛人，关注ing
robin_hood2012 2010-05-25
  • 打赏
  • 举报
 回复
这得分浏览器，不同的浏览器不一样
toury 2010-05-25
  • 打赏
  • 举报
 回复
查cancelBubble()
jquery hover 冒泡事件制作心型图片墙鼠标悬浮图片
jquery hover 冒泡事件制作心型图片墙鼠标悬浮图片 jquery hover 冒泡事件制作心型图片墙鼠标悬浮图片
jquery hover冒泡事件制作心型图片墙鼠标悬浮变大.zip
jquery hover冒泡事件制作心型图片墙鼠标悬浮变大.zip
jquery鼠标事件+动画效果
jQuery是-个快速、极简的JavaScript框架， 它是-个优秀的JavaScript代码库，设计的宗旨是“writeless，Do More”,即倡导写更少的代码，做更多的事情。它提供一种简便的JavaScript设计模式， 优化HTML文档操作、事件处理、动画设计和Ajax交互。虽然现在的Vue、react框架风靡世界，但是目前也有不少的jQuery的开发者坚持使用jQuery。本课程主要是jQuery实战，主要讲解jQuery的API的使用，以及项目实战。
浅谈jQuery 中的事件冒泡和阻止默认行为
1、事件冒泡 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>
html5结合jquery hover实现的图片悬停放大特效.rar
html5结合jquery hover实现的图片悬停放大特效，根据冒泡事件实现的悬停放大，在排列成“心”形的照片墙上，鼠标悬停于任意一张头像图片后，该图片即可放大显示，此类效果在HTML5的页面中，利用相关属性来实现，是挺容易就实现的，本次果演示如截图所示。
JavaScript

87,925

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章