Question

My jquery code
It’s not working when

   $("a").on("hover",function(){$(this).css("background","#ccc");},function(){$(this).css("background","#fff")});

But is working when

$("a").hover(function(){$(this).css("background","#ccc");},function(){$(this).css("background","#fff")});

How to make it to work with hover

Answer 1

In case of .on() hover it will look like

$("a").on('hover', function(e) {
  if(e.type =='mouseenter') {
   // code for mouseenter
  } else {
   // code for mouseleave
  }
});

But for .hover() is accept two functions first one for mouseenter and second one for mouseleave.

$('a').hover(
  // for mouseenter
  function() {

  },
  // for mouseleave
  function() {

  }
);

So if you want to use .on() then your code will:

$("a").on('hover', function(e) {
  if(e.type =='mouseenter') {
     // code for mouseenter
     $(this).css("background","#ccc");
  } else {
     // code for mouseleave
     $(this).css("background","#fff")
  }
});

As @ThiefMaster comment if you want to bind mouseenter and mouseleave separately then you can try:

$('a')
     .mouseenter(function() {
        $(this).css('background', '#ccc');
      })
     .mouseleave(function() {
         $(this).css('background', '#fff');
      });

or using .on() you can do

$('a').on({
  mouseenter: function() {
     $(this).css('background', '#ccc');
  },
  mouseleave: function() {
     $(this).css('background', '#fff');
  }
});