Ich habe zwei separate Elemente in meinem DOM, die eine Änderung erfordern, wenn eines davon bewegt wird. Wenn der Link bewegt wird, muss sich der Bild-Quellcode ändern (einfach) UND die Link-Farbe muss sich ändern. Wenn Sie den Mauszeiger über das Bild halten, muss derselbe Effekt auftreten (Bild-SRC-Änderungen und Link-Farbänderungen).

Das ist eigentlich ganz einfach, aber ich habe das Gefühl, dass es einen VIEL einfacheren Weg gibt, als den Ansatz, den ich verfolge. Derzeit gehe ich jedes der 8 Elemente durch und teste, ob sie einzeln schweben. Das funktioniert gut, aber hier gibt es so viel mehr jQuery, als ich denke.

Ich habe versucht, das Attribut onmouseover zu beiden Elementen hinzuzufügen und dieselbe Funktion auszulösen, aber aus irgendeinem Grund wurde die Funktion nicht ausgelöst.

Gibt es eine Möglichkeit zu testen, ob eines der Elemente schwebt, und eine Funktion auszulösen, wenn eines der beiden Elemente vorhanden ist? Etwas wie das:

if($(#elm1).hover() || $('#elm2').hover()) {
    //effect here
}

ODER

if($('#elm1').is(':hover') || $('#elm2').is(':hover')) {
    //effect here
}

Ich habe meinen obigen Beispielcode ausprobiert, aber keine Ergebnisse erhalten. Gibt es eine Möglichkeit, dies zu tun, oder muss ich jedes einzelne Element überprüfen?

2
Ty Bailey 19 Nov. 2013 im 20:18

3 Antworten

Beste Antwort

Es funktioniert, Sie führen es nur beim Laden der Seite aus, nicht wenn sich die Maus bewegt

$(document).mousemove(function() {    
    if($('#elm1').is(':hover') || $('#elm2').is(':hover')) {
        // Do stuff
    }
    else {
        // Revert do stuff or do other stuff
    }
});

Beispiel hier

Wie andere bereits gesagt haben, kennt jQuery den Status hover bereits, sodass dies nicht erforderlich wäre. In der Praxis sollten Sie denselben Selektor verwenden, um die Funktion darauf anzuwenden

$('#idOne, #idTwo').hover(function() { /* Do stuff */ });
7
Zach Saucier 19 Nov. 2013 im 16:23

Ich würde Ereignisse beim Mouseover registrieren und jedes Mal, wenn das Ereignis eintritt, eine Funktion auslösen

$("#elm1, #elm2").on("mouseover", function () {
    // effect here
});
3
Zach Saucier 19 Nov. 2013 im 16:41

Fügen Sie den Handler einfach wie folgt zu beiden Elementen hinzu:

$('#elm1, #elm2').hover(function(){
     // ... do stuff here ...
});

Sollte arbeiten . . .

2
Mark Pieszak - Trilon.io 19 Nov. 2013 im 16:24