从两个单独的函数创建一个JQuery悬停

Question

我有以下代码：

$('body').on('mouseenter', 'img[id$=_fav]', function(event) {
    $(this).parent().css("border-top-color", "#000");
});
$('body').on('mouseleave', 'img[id$=_fav]', function(event) {
    $(this).parent().css("border-top-color", "gray");
});

我想知道如何将这两者合并为一个悬停事件，或者这是不可能使用“实时”方式？

我想要这样的事情：

$('body').on('hover', 'img[id$=_fav]', function(event) {
function(){ //mouse enter
$(this).parent().css("border-top-color", "#000");
}
function(){ //mouse leave
$(this).parent().css("border-top-color", "gray");
}
}

Answer 1

不要将function() { twice用于mouseenter并使用,分隔mouseenter和mouseleave events，

$('img[id$=_fav]').hover(function(event) {// use function() once for mouse enter event
   $(this).parent().css("border-top-color", "#000");
},function(){ //mouse leave, you missed a comma in your code
   $(this).parent().css("border-top-color", "gray");
});

阅读hover()

已更新如果您要hover使用dynamically added elements，那么您必须使用 on（）和mouseenter mouseleave events正在使用，

来自jQuery.on()

  

在jQuery 1.8中弃用，在1.9中删除：名称"hover"用作   字符串"mouseenter mouseleave"的简写。它附单   这两个事件的事件处理程序，处理程序必须检查   event.type，用于确定事件是mouseenter还是mouseleave。   不要将"hover" pseudo-event-name与.hover()方法混淆，   它接受一个或两个功能。

Answer 2

基本上你想把hover event挂钩到动态创建/添加到DOM的元素上。由于我们无法使用hover获得on的相同语法，因此我们可以使用event type来转移控制流。从技术上讲，hover只会处理屏幕后面的mouseenter和mouseleave。尝试使用以下代码

$(document).on("hover",'img[id$=_fav]', function(e) {
  if(e.type == "mouseenter") {
      }
  else if (e.type == "mouseleave") {
      }
});

DEMO based on 1.8 and below

注意： 请跳过上述部分。只需了解它以供将来使用

---

由于悬停事件在1.9之后从Jquery中删除，但不是.hover（）函数。你不能在以后使用它与最新的库。而是尝试使用下面的mouseenter和mouseleave进行处理，

$(document).on({
    mouseenter: function () {

    },
    mouseleave: function () {

    }
}, 'img[id$=_fav]');

DEMO based on latest versions of JQuery

Answer 3

完全按照您的意愿完成：see the docs.