web-dev-qa-db-fra.com

jQuery: déclenche un survol d'un autre élément

Lorsque vous survolez un <div>, je souhaite qu'un "<a>" sur une partie distincte de la page soit également "survolé".

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

J'ai essayé cette jQuery, mais cela ne déclenche pas le CSS en vol stationnaire du <a>. 

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

Essaye ça:

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

Il appliquera les mêmes déclencheurs pour le récepteur que l'initiateur reçoit pour mouseenter et mouseleave. Notez que:

.hover(over, out)

est juste une variante de haut niveau de:

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

en utilisant ces informations, vous pouvez donc être plus précis lors de la liaison et du déclenchement d'événements de souris.

Comme indiqué dans le commentaire, vous pouvez également utiliser:

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

Il y a beaucoup plus à lire ici: http://api.jquery.com/hover/

42
David Hellsing

Vous pouvez faire quelque chose comme-:

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

Et maintenant, vous pouvez avoir une classe qui contient les règles css.

6
Andreas

Vous ne savez pas exactement ce que vous entendez par "survoler", mais supposons que vous ayez des CSS définies pour la pseudo-classe .receiver:hover, je vous suggère de les déplacer dans la classe CSS .hover et d'utiliser la fonction jQuery toggleClass.

Voici un exemple rapide qui rend le lien en gras lorsque vous passez la souris sur la div - http://jsfiddle.net/Pharaon/h29bh/

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

hover() est une méthode jQuery qui relie les événements mouseenter et mouseleave

essayer

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

Ou

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

Cependant, vous obtiendrez probablement de meilleurs résultats en ajoutant une classe à la balise a et en ajoutant une nouvelle règle css.

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