Survol de jQuery avec objet de classe unique

Question

Essayer de comprendre comment appliquer une classe commune à jQuery Hover, mais uniquement pour un seul élément à la fois, même si plusieurs éléments ont la même classe sur une page.

à savoir HTML

<div class="button">Button</div> 
<div class="button">Button 1</div> 
<div class="button">Button 2</div> 

JS

jQuery('.button').hover(function() { 
    jQuery('.button').addClass('button-hover'); 
}, function() { 
    jQuery('.button').removeClass('button-hover'); 
}); 

Comment puis-je faire si je passe la souris sur 'Bouton' pas tous les boutons ajouter la classe? c'est-à-dire, essentiellement, ne souhaite que l'ajout de la classe lorsqu'elle est focalisée sur une seule div.

Thnks

Answer 1

Utilisez this:

jQuery('.button').hover(function() { 
    jQuery(this).addClass('button-hover'); 
}, function() { 
    jQuery(this).removeClass('button-hover'); 
}); 

Answer 2

la référence à "ce". "ceci" dans le contexte de votre fonction hover est l'elment qui est survolé.

jQuery('.button').hover(function() { 
    jQuery(this).addClass('button-hover'); 
}, function() { 
    jQuery(this).removeClass('button-hover'); 
}); 

Answer 3

Vous voulez utiliser $(this) au lieu de '.button' au sein de votre fonction.

EDIT: Désolé, je devrais dire que $(this) est similaire à l'utilisation jQuery(this). Je ne pense pas que jQuery($(this)) fonctionnerait.