Question

我正试图在鼠标进入＆amp ;;时在图像上显示叠加<div>鼠标离开时隐藏。

我正在使用position:relative;和position:absolute;来执行此操作。我的代码在chrome＆amp; 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();
});

});

Answer 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();
        }
    });
});

FIDDLE

.hover（）mouseleave部分在IE中不起作用？

1 个答案: