Detaillierte Erläuterung des Hover-Ereignis-Beispielcodes für mehrere Elemente in jQuery

• 1. Anforderungen

• 2. Beispielstudie

• 3 Lösung

1. Einführung in die Anforderungen

jQuerys Hover

-Ereignis gilt nur für ein einzelnes HTML-Element, zum Beispiel:

$('#login').hover(fun2, fun2);

Die Funktion fun1

wird aufgerufen, wenn die Maus das #login-Element betritt, und die Funktion fun2 wird aufgerufen, wenn die Maus das Element verlässt.

Aber manchmal möchten wir, dass fun1 ausgelöst wird, wenn die Maus in den „kombinierten Bereich“ von zwei oder mehr Elementen eintritt, und dass fun2 ausgelöst wird, wenn es diese verlässt, während das Bewegen der Maus zwischen diesen Elementen nicht ausgelöst wird irgendwelche Ereignisse. Beispielsweise liegen zwei HTML-Elemente nebeneinander, wie unten gezeigt:

fun1 wird ausgelöst, wenn die Maus den „Kombinationsbereich“ der beiden betritt, und fun2 ist es Wird ausgelöst, wenn die Maus geht. Sie denken vielleicht, dass die Verwendung der folgenden Methode

$('#trigger, #drop'),hover(fun1, fun2);

unseren Anforderungen nicht entspricht, da fun2 und fun1 nacheinander ausgelöst werden, wenn #drop von #trigger eingegeben wird. Um dieses Problem zu lösen, besteht eine relativ einfache Möglichkeit darin, die HTML-Struktur zu ändern. Die Implementierung ist wie folgt:

<p id="container">
    <p id="trigger"></p>
    <p id="drop"></p>
</p>

$(&#39;#container&#39;).hover(fun1, fun2);

Diese Funktion wird durch die Bindung des Hover-Ereignisses an das übergeordnete Element erreicht.

2. Beispielstudie

Das Bild unten ist ein vereinfachtes Diagramm eines allgemeinen

Dropdown-Menüs. Die HTML-Struktur ist wie folgt:

<ul id="#nav">
    <li></li>
    <li></li>
    <li id="droplist">
        <span>下拉菜单</span>
        <ul>
            <li>下拉项1</li>
            <li>下拉项2</li>
            <li>下拉项3</li>
        <ul>
    </li>
    <li></li>
</ul>

Das implementierte JavaScript-Programm ist ebenfalls sehr einfach

$('#droplist').hover(function(){
    $(this).find('ul').show();
}, function(){
    $(this).find('ul').hide();
});

Diese Implementierungsmethode hat eine klare Logik, führt jedoch zu vielen verschachtelten HTML-Ebenen und zu vielen Unannehmlichkeiten beim Schreiben von CSS. Zum Beispiel:

#nav li { font-size:14px;  }

Wir möchten, dass dieses CSS eine 14-Pixel-Schriftart für das li-Element der ersten Ebene festlegt, aber es wirkt sich auch auf das Element der zweiten Ebene aus, daher müssen wir die folgende Anweisung verwenden Schreiben Sie es neu

#nav li li { font-size:12px; }

3. Lösung

Ändern Sie die HTML-Struktur

<ul id="#nav">
    <li></li>
    <li></li>
    <li id="trigger">下拉菜单</li>
    <li></li>
</ul>
<ul id="drop">
    <li>下拉项1</li>
    <li>下拉项2</li>
    <li>下拉项3</li>
<ul>

Führen Sie JS-Dateien nacheinander ein

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mixhover.js"></script>

Steuercode

$.mixhover(
    '#trigger', 
    '#drop', 
    function(trg, drop){
        #(drop).show();
    },
    function(trg, drop){
        #(drop).hide();
    }
)

Auf diese Weise wird #drop angezeigt, wenn die Maus #trigger betritt, und es wird kein Ereignis ausgelöst, wenn sich die Maus von #trigger zu #drop bewegt. Tatsächlich sind #trigger und #drop Elemente werden als ein Element behandelt.

jquery.mixhover.js Programm ist wie folgt

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Hover-Ereignis-Beispielcodes für mehrere Elemente in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!