Question

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

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

Answer 1

Use this:

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