Question

So I have an element that toggles between two background colours when clicked. But when the element is not selected, I want the background colour to change (and revert) on a hover. I’ve tried using the .on(‘hover’) and .off(‘hover’) within the toggle, but only the .off() seems to work.

$('.element').hover(
  function() {
    $(this).css('background', '#e7f1f5');
  },
  function() {
    $(this).css('background', '#fff');
  }
);

$('.element').toggle(
  function( select ) {
    select.preventDefault();
    $(this).off('hover');
    $(this).css('background', '#f6f6f6');
    other.code();
  },
  function( unselect ) {
    unselect.preventDefault();
    $(this).on('hover');
    $(this).css('background', '#fff');
    other.code();
  }
);

I toggle ‘on’, the ‘hover’ event no longer triggers (as desired).
When I toggle ‘off’, the ‘hover’ event still does not trigger.

I’m fairly new to jQuery and StackOverflow, so I’m sorry if this question is trivial.

Thanks!

Answer 1

use css:

.element{
   background-color:#FFF;
}
.element.hover{
   background-color:#e7f1f5;
}

instead of $(this).off('hover'); do:

$(this).addClass('hover');

instead of $(this).on('hover'); do:

$(this).removeClass('hover');