Question

这就是我需要做的事情：

对于页面上的每个图像，我创建一个包含链接的divt。我把div（在html代码中）放在图像后面并以某种方式设置样式，它正好是图像的大小，并且它放在与图像相同的位置，因此当它成为图像时它将覆盖整个图像可见（现在隐藏了跨度）。（为简洁省略了div样式）

$(document).ready(function () {
 $("img").each(function(i){

   //creates a span after each image

   $(this).attr("data-indexer", i);
   var layer = $("<div class='layer' data-indexer='" + i + "'><a href='http://www.google.com/' class='link'>Link</a></div>")

   $(this).after(layer);
 });

});

一旦用户悬停图像，div就会变得可见并覆盖整个图像。（函数在window.load上运行）

$("img").mouseenter(function() {
        //once the image is hovered, the span should appear
        var indexer = $(this).attr("data-indexer");
        $("div[data-indexer=" + indexer + "]").show();

    });

到目前为止，一切正常。

我需要覆盖div在用户悬停链接时保持可见，我需要它在鼠标离开div时隐藏。（函数在window.load上运行）

$("div[data-indexer]").mouseleave( function() {
    //once the mouse leaves the span, it should be hidden
    //THIS DOESN'T WORK ON IE7-8
    $(this).hide();
})

我只是在跨度上使用mouseleave事件来隐藏它。这适用于IE9-10，Chrome和Firefox，但在IE7和IE8上无法正常工作（mouseleave事件无法启动）。

以下是整个代码：http://jsfiddle.net/xPx6U/2/。它适用于Chrome / FF / IE9 +，但不适用于IE7-8。如果有人能帮我这个，我将不胜感激。不幸的是，这个jsFiddle在IE7-8上无法正常工作，所以整个代码的链接都在这条消息的末尾。

我尝试过使用委托，添加dom事件而不是使用jQuery，没有帮助。提前谢谢。

更新我把跨度改成了div。现在它有时会在鼠标离开时隐藏，有时则不会。这是更新的代码：http://pastebin.com/7AxkhvdG。

jQuery mouseleave没有在IE7和IE8上触发

0 个答案: