jQuery - unbind and rebind hover on click

Question

I want to unbind and rebind the hover styling when an item is clicked.

$('.merc-list img').mouseover(function(){
    if ($(this).hasClass('with-grayscale')){
        $(this).removeClass('with-grayscale');
    }
    $(this).css('transform', 'scale(' + 1.3 + ')');
    $('.merc-list img').not(this).each(function(){
        $(this).addClass('with-grayscale');
        $(this).css('transform', 'scale(' + 0.9 + ')');
    });
});

$('.merc-list img').mouseleave(function(){
    if ($(this).hasClass('with-grayscale')){
        $(this).removeClass('with-grayscale');
    }
    $(this).css('transform', 'scale(' + 1.0 + ')');
    $('.merc-list img').not(this).each(function(){
        if ($(this).hasClass('with-grayscale')){
            $(this).removeClass('with-grayscale');
        }
        $(this).css('transform', 'scale(' + 1.0 + ')');
    });
});

$('.merc-list img').on('click', function(){
    if ($(this).hasClass('selected')){
        $(this).bind('mouseover mouseleave'); // rebind for clicked image
        $(this).removeClass('selected');
        $(this).css('transform', 'scale(' + 1.0 + ')');
        $('.merc-list img').not(this).each(function(){
            $(this).bind('mouseover mouseleave'); // rebind for every other image except clicked image
            $(this).removeClass('with-grayscale');
            $(this).css('transform', 'scale(' + 1.0 + ')');
        });
    }else{
        $(this).unbind('mouseover mouseleave'); // unbind for clicked image
        if ($(this).hasClass('with-grayscale')){
            $(this).removeClass('with-grayscale');
        }
        $(this).addClass('selected');
        $(this).css('transform', 'scale(' + 1.3 + ')');
        $('.merc-list img').not(this).each(function(){
            $(this).unbind('mouseover mouseleave'); // unbind for every other image except clicked image
            $(this).addClass('with-grayscale');
            if ($(this).hasClass('selected')){
                $(this).removeClass('selected');
            }
            $(this).css('transform', 'scale(' + 0.9 + ')');
        });
    }
});

So when there is no hover or click event, this is how it originally looks like:

When I hover over it, all the other images shrink and become gray and the element that is hovered over becomes larger and has no grayscale (in this example I'm hovering over Phantom)

Now when I click Phantom, I want to freeze every mouseover and mouseleave on each of these mercs. However, when I unclick Phantom, for example, I want to unfreeze everything and go back to its original hover animation.

As you can see in my code, I am unbinding and rebinding the mouseover and mouseenter functionalities, but it's not rebinding (it does not go back to its original hover animations).

Thanks for any help!

Neil · Accepted Answer · 2017-11-14 20:16:16Z

2

Instead of binding and rebinding, I'd use a flag. A flag is just a boolean that tells your program whether or not to do a certain thing. So, in this case we will have a flag that will indicate whether or not the mouseenter and mouseleave events should work.

Example:

var shouldHover = true;

$('div').mouseenter(function () {
  if (shouldHover) {
    $(this).css({'background':'#4286f4'})
  }
});

$('div').mouseleave(function () {
  if (shouldHover) {
    $(this).css({'background':'#e3ffad'})
  }
});

$('div').click(function () {
  shouldHover = false;
});

div {
  display:inline-block;
  width:100px;
  height:100px;
  background:#e3ffad;
  text-align:center;
  line-height:100px;
  font-weight:bold;
  font-size:100px;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>1</div>
<div>2</div>
<div>3</div>

answered Nov 14, 2017 at 20:16

Neil

14.3k3 gold badges35 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Student22 Over a year ago

this fixed my problem in a flash. thank you so much neil!! this unbinding and rebinding was giving me a massive headache!

Collectives™ on Stack Overflow

jQuery - unbind and rebind hover on click

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related