web-dev-qa-db-de.com

jQuery: löst ein Hover-Ereignis von einem anderen Element aus

Wenn Sie mit der Maus über einen <div> fahren, möchte ich, dass ein <a> auf einem separaten Teil der Seite "aufgehängt" wird.

<div class="initiator">
</div>
<div>
   <a class="receiver href="#">Touch the div and I get hovered!</a>
</div>

Ich habe dieses jQuery ausprobiert, aber es löst nicht die Hover-CSS von <a> aus. 

$(".initiator").hover(function(){
   $(".receiver").hover();
   console.log("div was hovered");
});
25
Don P

Versuche dies:

$('.initiator').on('mouseenter mouseleave', function(e) {
    $('.receiver').trigger(e.type);
})

Es werden dieselben Auslöser für den Empfänger angewendet, die der Initiator für Mouseenter und Mausetaste empfängt. Beachten Sie, dass:

.hover(over, out) 

ist nur eine High-Level-Variante von:

.on('mouseenter', over).on('mouseleave', out)

wenn Sie diese Informationen verwenden, können Sie präziser sein, wenn Sie Mausereignisse binden und auslösen.

Wie im Kommentar erwähnt, können Sie auch Folgendes verwenden:

$('.initiator').hover(function(e) {
    $('.receiver').trigger(e.type);
})

Hier gibt es noch viel mehr zu lesen: http://api.jquery.com/hover/

42
David Hellsing

Sie könnten so etwas tun:

$(".initiator").hover(function(){
   $(".receiver").addClass('hover');
   console.log("div was hovered");
}, function(){
   $(".receiver").removeClass('hover');
});

Und jetzt können Sie eine Klasse haben, die die CSS-Regeln enthält.

6
Andreas

Sie sind sich nicht sicher, was Sie mit "hovered" meinen, aber unter der Annahme, dass Sie für die .receiver:hover-Pseudoklasse CSS definiert haben, würde ich vorschlagen, sie in die separate CSS-Klasse .hover zu verschieben und die Funktion jQuery toggleClass zu verwenden.

Hier ist ein schnelles Beispiel, in dem der Linktext fett dargestellt wird, wenn Sie mit der Maus über das div - http://jsfiddle.net/Pharaon/h29bh/ fahren.

$(".initiator").hover(function(){
  $(".receiver").toggleClass("hover");
  console.log("div was hovered");
});​
1
Sergey Rybalkin

hover() ist eine jQuery-Methode, die mouseenter- und mouseleave -Ereignisse zusammenfügt

versuchen

$(this).find('.receiver').mouseenter()

Oder

 $(this).find('.receiver').trigger('mouseenter')

Sie werden jedoch wahrscheinlich weitaus bessere Ergebnisse erzielen, wenn Sie dem Tag a eine Klasse hinzufügen und eine neue CSS-Regel hinzufügen.

 $(this).find('.receiver').toggleClass('hoverClass')
0
charlietfl