CODEWITHSUNDEEP
jqueryhover
Student22
Student22

Reputation: 2299

jQuery - unbind and rebind hover on click

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: original

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)

focus

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!

Upvotes: 0

Views: 62

Answers (1)

Neil
Neil

Reputation: 14313

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>

Upvotes: 2

Related Questions