Maison >interface Web >js tutoriel >jquery : Pourquoi l'événement de survol ne fait-il pas de bulle ?

jquery : Pourquoi l'événement de survol ne fait-il pas de bulle ?

黄舟original: 2017-06-26 11:20:112040parcourir

Comment empêcher les événements de survol de jquery de bouillonner
La couleur d'arrière-plan du div change lorsque la souris passe sur chaque div, mais je ne veux pas que le div parent du div intégré change de couleur. Comment faire cela ?
J’ai entendu dire qu’il s’agissait d’un incident bouillonnant, mais je ne comprends pas.

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

$("div").hover(
            function(e){
                $(this).addClass("hover");
                e.stopPropagation();    //这里
            },
            function(e){
                $(this).removeClass("hover");
                e.stopPropagation();   //这里
            }
        );

Notez que la fonction traitement d'événements doit transmettre un événementobjete

e.stopPropagation( ); Est-ce que ça ne marcherait pas si je le mettais directement ? Vous avez oublié de me donner une version running au 2ème étage ?

Le résultat est sorti, c'est très compliqué

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

L'événement survol n'est pas utilisé, mais l'effet est le même. Vous pouvez vous référer à

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

Haha, les trois effets sont différents. intéressant.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de l'exemple de code de l'événement Hover pour plusieurs éléments dans jQueryArticle suivant：Explication détaillée de l'exemple de code de l'événement Hover pour plusieurs éléments dans jQuery

Articles Liés

Voir plus