Javascript .hover（）鼠标删除部分在IE中不工作？

我试图在鼠标进入时在图像上显示覆盖层

，鼠标离开时隐藏

我正在使用

位置：relative带
位置：绝对
所以基本上，
.hove（）
的第二部分没有执行

这是我的密码

HTML

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

JS

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

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

});

jQuery（文档）.ready（函数（$）{
$（“img测试图像”）。悬停（函数（事件）{
$（this.wrap（“”）；
$（“#testdiv”）.css（“位置”、“相对”）；
var imageWrapperInner=“”；
$（“#testdiv”）.append（imageWrapperInner）；
$（.imageWrapperInnerDiv”）.slideDown（“快速”）；
}，功能（事件）{
$（.imageWrapperInnerDiv”）.remove（）；
$（this.unwrap（）；
});
});
在每个鼠标指针/左键上包装和展开一个元素似乎是一个坏主意，这也是IE出现问题的原因，包装事件处理程序与另一个元素绑定的元素等。请尝试以下方法：

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

jQuery（函数（$）{
$（“#测试图像”）。在({
鼠标指针：函数（事件）{
变量imageWrapperInnerDiv=$（“”，{'class'：'imageWrapperInnerDiv'}）；
$（'body'）.append（imageWrapperInner）；
imageWrapperInner.slideDown（“快速”）
},
mouseleave：函数（事件）{
$（.imageWrapperInnerDiv”）.remove（）；
}
});
});

在每个鼠标上包装和打开元素似乎是一个坏主意，这也是IE出现问题的原因，包装事件处理程序绑定到另一个元素的元素等等@adeneo非常感谢…它起了作用：）…请将其作为答案发布，以便我可以将其标记为正确