0

我试图<div>在鼠标进入时在图像上显示叠加层，并在鼠标离开时隐藏。

我正在使用position:relative;withposition:absolute;来执行此操作。我的代码在 chrome 和 firefox 中运行良好，但在 IE 9 中（我只有这个，所以不确定其他版本）它在鼠标进入图像时显示覆盖图像但它不会删除当鼠标离开图像时。

.hove()所以基本上没有执行的第二部分。

这是我的代码http://jsfiddle.net/AYaJn/。

HTML

<img id="testimage" src="http://www.dothetest.co.uk/images/do-test.gif" >

CSS

img#testimage{
    border:1px solid #000;
}

JS

jQuery(document).ready(function($){

$("img#testimage").hover(function(event){
    $(this).wrap("<div id='testdiv'></div>");
    $("#testdiv").css("position","relative");
    var imageWrapperInner="<div class='imageWrapperInnerDiv' style='position:absolute;top:0px;left:0px;background-color:#000;width:100%;height:30px;display:none;'></div>";
    $("#testdiv").append(imageWrapperInner);     
     $(".imageWrapperInnerDiv").slideDown("fast");                
},function(event){
    $(".imageWrapperInnerDiv").remove();
    $(this).unwrap();
});

});
4

1 回答 1

1

在每个 mouseenter / leave 上包装和展开元素似乎通常是一个坏主意，这也是 IE 问题的原因，包装具有与另一个元素绑定的事件处理程序的元素等。试试这样的事情：

jQuery(function($){
    $("#testimage").on({
        mouseenter: function(event){
            var imageWrapperInner = $('<div />', {'class': 'imageWrapperInnerDiv'});
            $('body').append(imageWrapperInner);
            imageWrapperInner.slideDown("fast")
        },
        mouseleave: function(event){
            $(".imageWrapperInnerDiv").remove();
        }
    });
});

小提琴

于 2013-06-08T17:44:00.683 回答