Web-Frontendjs-TutorialLösung für Mouseout- und Mouseover-Ereignisse, die ausgelöst werden, wenn die Maus über die Fähigkeiten eines untergeordneten Elements fährt
Was ich erreichen möchte: Wenn die Maus in die Blackbox eintritt, führt die orange Box eine Einblendanimation aus, wenn sich der Blackbox-Bereich bewegt (selbst wenn sie die rosa Box passiert, wird die Animation immer noch nicht ausgelöst); Wenn die Maus herausbewegt wird, verschwindet das orangefarbene Kästchen.
Erklärung des aufgetretenen Problems: Wenn sich die Maus in das schwarze Feld bewegt, führt das orangefarbene Feld eine Einblendanimation aus. Wenn die Maus jedoch vom schwarzen Feld zum rosafarbenen Feld wechselt, verschwindet das orangefarbene Feld und dann das Die Einblendanimation wird erneut ausgeführt. Wenn sich die Maus aus der rosa Box in die schwarze Box bewegt, wird die Einblendanimation der orangen Box erneut ausgeführt. Das ist nicht das, was ich will.
Anfangscode:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<meta charset="utf-8">
<title>mouseover mouseout</title>
<style type="text/css" media="screen">
.parent{
width:200px;
height:200px;
background:black;
}
.child{
width:100px;
height:100px;
background:pink;
}
.a1{
width:40px;
height:40px;
background:orange;
display:none;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="a1"></div>
</div>
<script>
$('.parent').on('mouseover',function(e){
$('.a1').show(1000);
});
$('.parent').on('mouseout',function(e){
$('.a1').css('display','none');
});
</script>
</body>
</html>
Zuerst erklären wir die Gründe, warum diese Probleme auftreten.
Wenn sich die Maus von der Blackbox zur Pinkbox bewegt, wird das Mouseover der Blackbox ausgelöst, und aufgrund des Ereignissprudelns wird sofort das Mouseover-Ereignis der Blackbox, also tatsächlich der Orangebox, ausgelöst verschwindet zuerst und führt dann sofort die Einblendanimation aus. Dies ist der Prozess, den wir sehen.
Wenn sich die Maus von der rosa Box zur schwarzen Box bewegt, wird das Mouseover-Ereignis aus der Blackbox erneut ausgelöst (denn unabhängig davon, ob die Maus über das ausgewählte Element oder seine Unterelemente geht, wird das Mouseover-Ereignis ausgelöst). und gleichzeitig wird auch das Mouseover ausgelöst. Es erfolgt also erneut der Vorgang des Einblendens.
Methode 1: Verwenden Sie Mouseleave/Mouseout anstelle von Mouseover/Mouseout [Beste Methode]
Sehen wir uns zunächst den Unterschied in der Verwendung zwischen Mouseout&Mouseover und Mouseleave&Mouseenter an
Mouseover und MouseEnter
Das Mouseover-Ereignis wird immer dann ausgelöst, wenn der Mauszeiger über das ausgewählte Element oder seine Unterelemente verläuft.
Das Mouseenter-Ereignis wird nur ausgelöst, wenn der Mauszeiger von außerhalb des Elements in das ausgewählte Element (in das Element) gelangt.
Mouseout und Mouseleave
Das Mouseout-Ereignis wird unabhängig davon ausgelöst, ob der Mauszeiger das ausgewählte Element oder ein untergeordnetes Element verlässt.
Das Mouseleave-Ereignis wird nur ausgelöst, wenn der Mauszeiger das ausgewählte Element verlässt (außerhalb des Elements).
Sie können sich ein einfaches Beispiel ansehen, um den Unterschied zwischen den beiden zu erkennen
So kann der verbesserte Code
sein
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<meta charset="utf-8">
<title>mouseover mouseout</title>
<style type="text/css" media="screen">
.parent{
width:200px;
height:200px;
background:black;
}
.child{
width:100px;
height:100px;
background:pink;
}
.a1{
width:40px;
height:40px;
background:orange;
display:none;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="a1"></div>
</div>
<script>
$('.parent').on('mouseenter',function(e){
$('.a1').show(1000);
});
$('.parent').on('mouseleave',function(e){
$('.a1').css('display','none');
});
</script>
</body>
</html>
Methode 2: Verwenden Sie e.stopPropagation(), um eine weitere Ausbreitung des Ereignisses zu verhindern
e.stopPropagation() stoppt die weitere Ausbreitung von Ereignissen in den Erfassungs-, Zielverarbeitungs- oder Bubbling-Phasen des Ausbreitungsprozesses. Nach dem Aufruf dieser Methode wird der Handler für das Ereignis auf diesem Knoten aufgerufen und das Ereignis wird nicht mehr an andere Knoten gesendet.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<meta charset="utf-8">
<title>mouseover mouseout</title>
<style type="text/css" media="screen">
.parent{
width:200px;
height:200px;
background:black;
}
.child{
width:100px;
height:100px;
background:pink;
}
.a1{
width:40px;
height:40px;
background:orange;
display:none;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="a1"></div>
</div>
<script>
$('.parent').on('mouseover',function(e){
$('.a1').show(1000);
});
$('.parent').on('mouseout',function(e){
$('.a1').css('display','none');
});
$('.child').on('mouseover',function(e){
e.stopPropagation();
$('.a1').css('display','block');
//这是保证动画体的末状态不变
});
$('.child').on('mouseout',function(e){
e.stopPropagation();
//防止从粉色框移出到黑色框时再次触发其他事件
})
</script>
</body>
</html>
Erweitern Sie Ihr Denken:
1. Was tun, wenn es zu viele untergeordnete Elemente gibt? Muss jedes einzelne an e.stopPropagation() gebunden werden?
Verwenden Sie einen JQuery-Selektor .children(), z. B. $('.parent').children(). Ruft die untergeordneten Elemente jedes Elements im Satz übereinstimmender Elemente ab.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.
Ersetzen Sie Stringzeichen in JavaScriptMar 11, 2025 am 12:07 AMDetaillierte Erläuterung der Methode für JavaScript -Zeichenfolge und FAQ In diesem Artikel werden zwei Möglichkeiten untersucht, wie String -Zeichen in JavaScript ersetzt werden: Interner JavaScript -Code und interne HTML für Webseiten. Ersetzen Sie die Zeichenfolge im JavaScript -Code Die direkteste Möglichkeit ist die Verwendung der Ersatz () -Methode: str = str.replace ("find", "ersetzen"); Diese Methode ersetzt nur die erste Übereinstimmung. Um alle Übereinstimmungen zu ersetzen, verwenden Sie einen regulären Ausdruck und fügen Sie das globale Flag G hinzu:: STR = Str.Replace (/fi
Erstellen Sie Ihre eigenen AJAX -WebanwendungenMar 09, 2025 am 12:11 AMHier sind Sie also bereit, alles über dieses Ding namens Ajax zu lernen. Aber was genau ist das? Der Begriff AJAX bezieht sich auf eine lose Gruppierung von Technologien, mit denen dynamische, interaktive Webinhalte erstellt werden. Der Begriff Ajax, ursprünglich von Jesse J geprägt
Wie erstelle ich meine eigenen JavaScript -Bibliotheken?Mar 18, 2025 pm 03:12 PMIn Artikel werden JavaScript -Bibliotheken erstellt, veröffentlicht und aufrechterhalten und konzentriert sich auf Planung, Entwicklung, Testen, Dokumentation und Werbestrategien.
Wie optimiere ich den JavaScript -Code für die Leistung im Browser?Mar 18, 2025 pm 03:14 PMIn dem Artikel werden Strategien zur Optimierung der JavaScript -Leistung in Browsern erörtert, wobei der Schwerpunkt auf die Reduzierung der Ausführungszeit und die Minimierung der Auswirkungen auf die Lastgeschwindigkeit der Seite wird.
Wie debugge ich den JavaScript -Code effektiv mithilfe von Browser -Entwickler -Tools?Mar 18, 2025 pm 03:16 PMIn dem Artikel werden effektives JavaScript -Debuggen mithilfe von Browser -Entwickler -Tools, der Schwerpunkt auf dem Festlegen von Haltepunkten, der Konsole und der Analyse der Leistung erörtert.
JQuery MatrixeffekteMar 10, 2025 am 12:52 AMBringen Sie Matrix -Filmeffekte auf Ihre Seite! Dies ist ein cooles JQuery -Plugin, das auf dem berühmten Film "The Matrix" basiert. Das Plugin simuliert die klassischen grünen Charakter-Effekte im Film und wählen Sie einfach ein Bild aus, und das Plugin verwandelt es in ein mit numerischer Zeichen gefüllte Bild im Matrix-Stil. Komm und probiere es aus, es ist sehr interessant! Wie es funktioniert Das Plugin lädt das Bild auf die Leinwand und liest die Pixel- und Farbwerte: Data = ctx.getImagedata (x, y, setting.grainize, setting.grainesize) .data Das Plugin liest geschickt den rechteckigen Bereich des Bildes und berechnet JQuery, um die durchschnittliche Farbe jedes Bereichs zu berechnen. Dann verwenden Sie
So bauen Sie einen einfachen JQuery SliderMar 11, 2025 am 12:19 AMIn diesem Artikel werden Sie mit der JQuery -Bibliothek ein einfaches Bildkarousel erstellen. Wir werden die BXSLIDER -Bibliothek verwenden, die auf JQuery basiert und viele Konfigurationsoptionen zum Einrichten des Karussells bietet. Heutzutage ist Picture Carousel zu einem Muss auf der Website geworden - ein Bild ist besser als tausend Wörter! Nachdem Sie sich entschieden haben, das Bild -Karussell zu verwenden, ist die nächste Frage, wie Sie es erstellen. Zunächst müssen Sie hochwertige, hochauflösende Bilder sammeln. Als nächstes müssen Sie ein Bildkarousel mit HTML und einem JavaScript -Code erstellen. Es gibt viele Bibliotheken im Web, die Ihnen helfen können, Karussell auf unterschiedliche Weise zu erstellen. Wir werden die Open -Source -BXSLIDER -Bibliothek verwenden. Die BXSLIDER -Bibliothek unterstützt reaktionsschnelles Design, sodass das mit dieser Bibliothek gebaute Karussell an alle angepasst werden kann
So laden und herunterladen Sie CSV -Dateien mit Angular hoch und laden Sie sie herunterMar 10, 2025 am 01:01 AMDatensätze sind äußerst wichtig für den Aufbau von API -Modellen und verschiedenen Geschäftsprozessen. Aus diesem Grund ist das Import und Exportieren von CSV eine häufig benötigte Funktionalität. In diesem Tutorial lernen Sie, wie Sie eine CSV-Datei in einem Angular herunterladen und importieren.
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
ZendStudio 13.5.1 Mac
Leistungsstarke integrierte PHP-Entwicklungsumgebung
EditPlus chinesische Crack-Version
Geringe Größe, Syntaxhervorhebung, unterstützt keine Code-Eingabeaufforderungsfunktion
MantisBT
Mantis ist ein einfach zu implementierendes webbasiertes Tool zur Fehlerverfolgung, das die Fehlerverfolgung von Produkten unterstützen soll. Es erfordert PHP, MySQL und einen Webserver. Schauen Sie sich unsere Demo- und Hosting-Services an.
SublimeText3 Linux neue Version
SublimeText3 Linux neueste Version
mPDF
mPDF ist eine PHP-Bibliothek, die PDF-Dateien aus UTF-8-codiertem HTML generieren kann. Der ursprüngliche Autor, Ian Back, hat mPDF geschrieben, um PDF-Dateien „on the fly“ von seiner Website auszugeben und verschiedene Sprachen zu verarbeiten. Es ist langsamer und erzeugt bei der Verwendung von Unicode-Schriftarten größere Dateien als Originalskripte wie HTML2FPDF, unterstützt aber CSS-Stile usw. und verfügt über viele Verbesserungen. Unterstützt fast alle Sprachen, einschließlich RTL (Arabisch und Hebräisch) und CJK (Chinesisch, Japanisch und Koreanisch). Unterstützt verschachtelte Elemente auf Blockebene (wie P, DIV),
