Question

I have following toggling script:

  $('.edit_bg').on({
    mouseenter: function () {
      $(this).addClass('edit_bg');
    },
    mouseleave: function () {
      $(this).removeClass('edit_bg');
    }
  });

But this works after i first hover that div.

How should I remove all .edit_bg classes from divs on start and be able to show them on hover?

Answer 1

After the on function just do removeClass.

$('.edit_bg').on({
    mouseenter: function () {
        $(this).addClass('edit_bg');
    },
    mouseleave: function () {
        $(this).removeClass('edit_bg');
    }
}).removeClass('edit_bg');