JQuery Hover с одним элементом класса

Question

Попытка выяснить, как применить общий класс к jQuery Hover, но только для одного элемента за раз, даже если на странице есть несколько элементов с одним и тем же классом.

т.е. 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');
});

Как я могу это сделать, если при наведении курсора на кнопку «Кнопка», не ВСЕ кнопки добавляют класс?то есть, по сути, хотите, чтобы он добавлял класс только в случае фокусировки на одном элементе div?

Thnks

Answer 1

Использование this:

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

Answer 2

Вы хотите использовать $(this) вместо '.button' в вашей функции.

РЕДАКТИРОВАТЬ: Извините, я должен сказать, что $(this) похоже на использование jQuery(this). Я не думаю, что jQuery($(this)) будет работать.

Answer 3

Используйте ссылку на «это».«this» в контексте вашей функции наведения - это элемент, над которым наведите курсор.

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