jQuery Hover with Class Single Item

Trying to figure out how to apply a common class to jQuery Hover but only for a single item at a time even if there are multiple items with the same class on a page.

i.e. 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')开发者_如何学C;
});

How can I do this so if I hover over 'Button' not ALL the buttons add the class ? i.e. essentially only want it to add the class when Focused on a single div ?

Thnks

Use this:

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

Use the reference to "this". "this" in the context of your hover function is the elment that is hovered over.

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

You want to use $(this) instead of '.button' within your function.

EDIT: Sorry, I should say that $(this) is similar to using jQuery(this). I don't think jQuery($(this)) would work.