如何首先隐藏类并仅在jQuery中悬停时显示？

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');

Answer 2

I understand what you are trying to achieve using Javascript/jQuery, but you can achieve it simply using css:

.edit_bg
{
    background-color: blue;
}

.edit_bg:hover
{
    background-color: red;
}

Look, ma! No javascript! http://jsfiddle.net/adrianonantua/rv9ht/