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>

...全文

967 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");

			}

		);

	}