Solution au problème du déplacement entre deux éléments avec le même survol de la souris dans jQuery

Le problème du déplacement entre deux éléments avec le même survol de la souris dans jQuery

$('#d11,#d12').on('mouseover',function(){
                $('#d2').animate({opacity:'100'});
            });

Comme indiqué dans le code, lors du déplacement entre d11 et d12, animate s'exécutera L'objet est scintillement. Comment le résoudre? Le code détaillé est le suivant :

    
    
    
    
    

        

        

    
    

    <script>
        $(document).ready(function(){
            $(&amp;#39;#d11,#d12&amp;#39;).on(&amp;#39;mouseover&amp;#39;,function(){
                $(&amp;#39;#d2&amp;#39;).animate({opacity:&amp;#39;100&amp;#39;});
            });
            $(&#39;#d11,#d12&#39;).on(&#39;mouseout&#39;,function(){
                $(&#39;#d2&#39;).animate({opacity:&#39;0&#39;});
            });
        });    </script>

// 先终断之前的动画$(document).ready(function(){
    $('#d11,#d12').on('mouseover',function(){
        $('#d2').stop(true).animate({opacity:'100'});
    });
    $('#d11,#d12').on('mouseout',function(){
        $('#d2').stop(true).animate({opacity:'0'});
    });
});

Méthode 1 :

Pas besoin de js, ajoutez une phrase en css :

#d1:hover~#d2{opacity:1}

Mais vous il faut faire attention à la largeur d1...

Méthode 2 :
Ajoutez un nouveau class.opa1{opacity:1} puis utilisez addClass et removeClass.

Arrêtez l'animation avant d'animer. Ou utilisez .hover() encapsulé

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!