jquery - jQuery 切换和悬停功能

Question

所以我有一个元素可以在单击时在两种背景颜色之间切换。但是当没有选择元素时，我希望背景颜色在悬停时改变（并恢复）。我尝试在切换中使用 .on('hover') 和 .off('hover') ，但似乎只有 .off() 有效。

$('.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();
  }
);

我切换“开”，“悬停”事件不再触发（根据需要）。当我切换“关闭”时，“悬停”事件仍然不会触发。

我对 jQuery 和 StackOverflow 还很陌生，所以如果这个问题是微不足道的，我很抱歉。

谢谢！

Answer 1

使用 CSS：

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

而不是$(this).off('hover');这样做：

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

而不是$(this).on('hover');这样做：

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