Mouseover und mouselave trigger jedes Mal, wenn ich die Maus innerhalb des angegebenen Elements bewegen

Question

Ich erstelle eine Website, wo Sie die Maus über ein Bild bewegen und es zeigt ein Element (in diesem Fall durch seine Höhe von 0 bis 154px).

jQuery(document).ready(function(){ 
    jQuery("#dropdown-menu-create .dropimage").mouseover(function(){ 
     jQuery("#dropdown-menu-create .toggle").animate({height:"154px"},200); 
    }); 
    jQuery("#dropdown-menu-create .dropimage").mouseout(function(){ 
     jQuery("#dropdown-menu-create .toggle").animate({height:"0"},200); 
    }); 
}); 

Der Inhalt erweitert, wenn die Maus eintritt und bricht zusammen, wenn die Maus Blätter, aber jedes Mal, wenn die Maus innerhalb das Element der Inhalt expandiert und kollabiert so oft, bis die Maus verlässt das Element bewegt.

Ich hatte dieses Problem nie zuvor, und ich habe diese Funktionen in der Vergangenheit verwendet, so dass ich ratlos bin, was vor sich geht. Irgendwelche Ideen?

Edit:

jQuery(document).ready(function(){ 
    jQuery("#dropdown-menu-create .dropimage").mouseenter(function(){ 
     jQuery("#dropdown-menu-create .toggle").stop(true,true).animate({height:"154px"},200); 
    }); 
    jQuery("#dropdown-menu-create .dropimage").mouseleave(function(){ 
     jQuery("#dropdown-menu-create .toggle").stop(true,true).animate({height:"0"},200); 
    }); 
}); 

ich jetzt mit dem Code oben und immer noch genau das gleiche Problem bekommen. Ich habe alle Variationen der .stop-Funktion ausprobiert (falsch, falsch) (falsch, wahr) (wahr, falsch) (wahr, wahr). Das Problem tritt bei jedem Problem anders auf, tritt jedoch immer noch auf.

ULTIMATE EDIT:

Das Problem war, dass der Inhalt, der die Maus ging durch unterschiedliche Inhalte verdeckt, wenn die Funktion aufgerufen wurde. Daher trat die Maus an jedem beliebigen Punkt gleichzeitig in das Bild ein und verließ es. Das Problem wurde gelöst, indem der Funktionsaufruf an ein anderes Element verschoben wurde.

Answer 1

Versuchen Sie, das .mouseenter Ereignis statt dem .mouseover

Ich denke, mit dem tun!

Answer 2

Hinzufügen eines. Stop() vor Ihrer .animate() wird dazu beitragen, das zu beheben. durch die vorherige Animation stoppen verhindert dies die Animation mehrmals feuern, wenn der Benutzer schnell viele Male mit der Maus über das Element bewegt

Answer 3

Sie müssen möglicherweise mouseenter verwenden, anstatt mouseover und mouseleave statt mouseout

Oder Sie können versuchen, und verwenden .hover Funktion wie unten,

jQuery(document).ready(function(){ 
    jQuery("#dropdown-menu-create .dropimage").hover(function(){ //mouseenter 
     jQuery("#dropdown-menu-create .toggle").animate({height:"154px"},200); 
    }, function(){ //mouseleave 
     jQuery("#dropdown-menu-create .toggle").animate({height:"0"},200); 
    }); 
}); 

Answer 4

Da Sie dies versuchen, auf einem Behälter zu implementieren , Ihr korrekter Event-Handler ist mouseenter und mouseleave.

Beispiel:

$("#dropdown-menu-create .dropimage").mouseenter(function(){ 
    $("#dropdown-menu-create .toggle").animate({height:"154px"},200); 
}); 
$("#dropdown-menu-create .dropimage").mouseleave(function(){ 
    $("#dropdown-menu-create .toggle").animate({height:"0"},200); 
}); 

Answer 5

Obwohl dies nicht vollständig relevant sein kann, hatte ich ein ähnliches Problem. Alles was ich am liebsten über das Div bewegen würde, würde das Ereignis auslösen. Um das Problem zu lösen, erkannte ich, dass, als das "Hover" -Ereignis ausgelöst wurde, das umgeschaltete div zu dem war, über dem meine Maus war. Um es zu beheben, habe ich gerade ein Ereignis hinzugefügt, um es beim Verlassen der Maus auszublenden.

.profile-about { 
     position: absolute; 
     width: 100%; 
     height: 100%; 
     top: 5%; 
     left: 0; 
     z-index: 2; 
     display: none; 
    } 

.profile-image { 
    max-height: 300px; 
    max-width: 300px; 
    -webkit-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.75); 
    -moz-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.75); 
    box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.75); 
} 

    $('.profile-image').hover(function(){ 
     $(this).next().fadeIn(100); 
    }); 

    $('.profile-about').mouseleave(function(){ 
     $(this).fadeOut(100); 
    }); 


    <img src="img/somebody.jpg" class="profile-image"> 
        <div class="profile-about"> 
         <p> 
         Hello I am somebody! 
         </p> 
        </div>