Temporarily disable hover when a button is clicked (jQuery)

Question

I have a small "interactive slideshow" on my About page, in which the user can click 1 of 5 buttons, and see the resulting "slide". Each "slide" is a <section> element, with varying content inside. When the page loads, the first button ("About Me"), should be red. Here are the other requirements:

• When user clicks on any button, it should change to red AND all others should change to blue.
  • This same button must stay red when the user "leaves" the button
• When user hovers over any button, it should change to red, and then back to blue when the user leaves it
  • Unless this button is the current button, in which case it must remain red
• There must always be 1 button that is red, as this indicates the previous slide.
• Only 2 buttons may be red at a time (one from a previous click, and one from current hover).

I have the .click() event working perfectly, but I cannot seem to get the .hover() effect to work simultaneously. When I have the two effects running, the hover effect overrides the click effect. As soon as my mouse leaves the button after clicking it, the background changes to dodgerblue, even though it should remain indianred (I think this is because of the 'mouseoff' part of the hover event).

I have looked at similar questions, but cannot find one that answers my current questions.

Any suggestions?

var aryButtons = $('.button');
$(aryButtons[0]).css('background-color', 'indianred');

// IMPORTANT - If you comment this section out, the hover effect disappears, but the click function works. However, I need to have both working at once, so that when a button is clicked, it will stay indian red even when the user leaves the element. In addition, they need to be able to hover over other elements again.

$(aryButtons).hover(function () {
    $(this).css('background-color', 'indianred');
}, function () {
    $(this).css('background-color', 'dodgerblue');
});

$(aryButtons).click(function () {
    $.each(aryButtons, function () {
        $(this).css('background-color', 'dodgerblue');
    });

    $(this).css('background-color', 'indianred');
});

<section class="button"></section>
<section class="button"></section>
<section class="button"></section>

.button {
    display: inline-block;
    height: 50px;
    width: 50px;
    margin-right: 10px;
    background-color: dodgerblue;
    border: 1px solid black;
}

Here is a jsFiddle: https://jsfiddle.net/UnaviaMedia/b3ozk00p/8/

Answer 1

Example Fiddle

You're using the wrong tool.

CSS is much better suited to this task. All the jQuery needs to do is flip the class.

Add this CSS

.button.clicked {
    background-color: indianred;
}
.button.clicked:hover {
    background-color: dodgerblue;
}
.button:hover {
    background-color: indianred;
}

Change Javascript to this

aryButtons.on('click', function() {
    $(this).toggleClass('clicked');
});

Note: You don't need to re-wrap everything in $(...) whenever you want to use jQuery with it. Your declaration of $('.buttons') for aryButtons will persist as a jQuery object. That's why we got rid of that. You should be using the .on function for event binding as it allows you to toggle events being tracked on an element. Anything that ends up in an event binding call to jQuery needs to be a function, so we wrapped the $(this).toggleClass() call in an anonymous function. That should solve all the issues with your code.

Update:

So, after additional requirements, here's the updated fiddle:

JSFiddle

Again, fairly straightforward:

JavaScript

aryButtons.on('click', function() {
  $(this).toggleClass('clicked').siblings().removeClass('clicked');
});

All additional CSS

.button.clicked,
.button.clicked.waiting:hover
{
    background-color: indianred;
}
.button:hover {
    background-color: indianred;
}

I hope that helps.