So verwenden Sie JQuery, um Elemente durch Mausbewegungen auszublenden

JQuery ist eine sehr beliebte JavaScript-Bibliothek, die eine große Anzahl von Funktionen und Methoden zur Vereinfachung gängiger JS-Aufgaben bereitstellt. Das Ausblenden von Elementen in JQuery ist eine der häufigsten Aufgaben. Hier erfahren Sie, wie Sie mit der JQuery-Maus ausgeblendete Elemente verschieben.

JQuery bietet eine sehr nützliche Methode „hide()“, mit der HTML-Elemente ausgeblendet werden können. Wenn Sie mehrere Elemente ausblenden möchten, können Sie sie mit derselben Klasse auswählen und dann die Methode hide() aufrufen, um sie auszublenden.

Hier ist ein Beispiel:

HTML-Code:

     <div class="box"><p>这是一个段落。</p></div>
     <div class="box"><p>这是另一个段落。</p></div>

CSS-Code:

.box{
    padding:10px;
    background-color:#f1f1f1;
}

JS-Code: #🎜 🎜#

$('.box').hide();

Im obigen Code verwenden wir JQuery, um alle Elemente mit der „Box“-Klasse auszuwählen und rufen die Methode .hide() auf, um sie auszublenden. Wenn Sie die Seite jetzt in einem Browser betrachten, sehen Sie nichts, da alle Elemente mit der Klasse „Box“ ausgeblendet sind.

Dabei gibt es jedoch ein Problem: Wie kann ich sie wieder anzeigen? Sie können die Methode .show() verwenden, um das Element wiederherzustellen. Hier verwenden wir jedoch eine einfachere Methode, nämlich das Ein- und Ausblenden von Elementen mithilfe von Mausbewegungen zu steuern.

Hier ist ein Beispiel:

HTML-Code:

     <div class="box"><p>这是一个段落。</p></div>
     <div class="box"><p>这是另一个段落。</p></div>

CSS-Code:

.box{
    padding:10px;
    background-color:#f1f1f1;
}

JS-Code: #🎜 🎜#

$('.box').mouseover(function(){
    $(this).hide();
}).mouseout(function(){
    $(this).show();
});

Im obigen Code verwenden wir JQuery, um alle Elemente mit der „Box“-Klasse auszuwählen und ein Mausbewegungsereignis (Mouseover) zu registrieren. Wenn sich die Maus über ein Element bewegt, wird die Methode hide() aufgerufen, um das Element auszublenden. Wenn sich die Maus wegbewegt, wird die Methode show() aufgerufen, um das Element anzuzeigen.

Wenn Sie diese Seite jetzt in Ihrem Browser betrachten, sehen Sie alle Elemente. Wenn Sie jedoch mit der Maus über ein Element fahren, wird es ausgeblendet. Wenn die Maus wegbewegt wird, wird sie wieder angezeigt.

Oben erfahren Sie, wie Sie mit der JQuery-Maus versteckte Elemente verschieben. Diese Technik kann in vielen Webanwendungen wie Menüs, Registerkarten usw. verwendet werden.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie JQuery, um Elemente durch Mausbewegungen auszublenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!