Question

我似乎无法将以下内容转换为实时悬停

$("li.favorite_item").hover(
    function () {
        $(this).append($(" <a href='#' class='button'>x</a>"));
    }, 
    function () {
        $(this).find("a:last").remove();
    }
);

我试过了：

$("li.favorite_item"").live('hover', function() { 
    function () {
        $(this).append($(" <a href='#' class='button'>x</a>"));
    }, 
    function () {
        $(this).find("a:last").remove();
    }
});

但它不起作用。

Answer 1

来自jQuery 1.7+ .live（）是 deprecated ，而.delegate（）是 superseded 由.on（）方法

使用.on()和.off()代替.live（）和.die（）。使用.on（）代替.delegate（）。

转换旧代码非常简单as explained here。

您需要分别调用.hover()映射到的事件，如下所示：

$("li.favorite_item").live('mouseenter', function() { 
  $(this).append($(" <a href='#' class='button'>x</a>"));
}).live('mouseleave', function () {
  $(this).find("a:last").remove();
});

.hover()不是.click()之类的事件函数，例如，它是just a special shortcut for .mouseenter(handler1).mouseleave(handler2) ...因此您需要在.live()调用中执行相同操作。< / p>

如果您使用的是jQuery 1.4.3+，则可以使用地图来简化操作，例如：

$("li.favorite_item").live({
  mouseenter: function() { 
    $(this).append($(" <a href='#' class='button'>x</a>"));
  },
  mouseleave: function () {
    $(this).find("a:last").remove();
  }
});

此外，如果这是特定的<ul>，.delegate()是更好的选择，如下所示：

$("#myUL").delegate("li.favorite_item", {
  mouseenter: function() { 
    $(this).append($(" <a href='#' class='button'>x</a>"));
  },
  mouseleave: function () {
    $(this).find("a:last").remove();
  }
});

Answer 2

.live（）语法更好，但我们现在必须使用.on（）。

您可以在文档上使用事件映射，选择器作为第二个参数：

$(document).on({
    mouseenter: function () {
        $(this).append("<a href='#' class='button'>x</a>");
    },
    mouseleave: function () {
        $(this).find("a:last").remove();
    }
}, "li.favourite_item");

Answer 3

这是真的......

$("#your_div_id").live('mouseover',function(){

    $(this).find(".child_div").css('background-color','#111111');

}).live('mouseout',function(){

     $(this).find(".child_div").css('background-color','#757575');
});

jQuery直播悬停

3 个答案: