CODEWITHSUNDEEP
jqueryhtmlcsshoverclick
Kendall
Kendall

Reputation: 2172

Temporarily disable hover when a button is clicked (jQuery)

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:

Example

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/

Upvotes: 4

Views: 7310

Answers (3)

carinlynchin
carinlynchin

Reputation: 389

Just made something like that work.... do the selectors :active:hover and put the original style back to the non hover state. It overrides the active or hover alone

ie:

:active {blah blah}

:hover {blah blah}

:active:hover {this is the one that will work if clicked (and obviously hovered) at the same time

Upvotes: 0

jrod
jrod

Reputation: 66

I hope this helps you, i created a self invoking function and inside i created a variable called clicked_btn that holds the value of the current button that was clicked, this variable is accessible from within the click and hover methods, so whatever button is clicked it's color is changed to indianred and stays indianred, and when hovered over it changes color as well except the one that was clicked.

(function(){
  var clicked_btn = "";
  $('.button').click(function(){
  clicked_btn = $(this); 
  (clicked_btn).css('background-color','indianred');
  $('.button').not(this).css('background-color','dodgerblue');
});

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

})();

Example in jsFiddle https://jsfiddle.net/ypcpyr2q/

Upvotes: 3

Josh Burgess
Josh Burgess

Reputation: 9577

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.

Upvotes: 6

Related Questions