javascript - on 和 hover 不能一起工作

Question

我的 jquery 代码不工作的时候

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

但是在工作的时候

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

如何让它与悬停一起工作

Answer 1

在 .on() 悬停的情况下，它看起来像

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

但是 .hover() 接受两个函数，第一个用于 mouseenter，第二个用于 mouseleave。

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

  },
  // for mouseleave
  function() {

  }
);

所以如果你想使用 .on() 那么你的代码将:

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

作为 @ThiefMaster 如果你想单独绑定(bind) mouseenter 和 mouseleave 可以尝试:

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

或者使用 .on() 你可以做到

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