javascript - .hover() mouseleave 部分が IE で動作しない?

Question

<div>マウスが入ると画像にオーバーレイを表示し、マウスが離れると非表示にしようとしています。

これを行うためにwithを使用position:relative;しposition:absolute;ています.私のコードはchromeとfirefoxで正常に動作していますが、IE 9（私はこれしか持っていないので、他のバージョンについてはわかりません）では、マウスが画像に入るとオーバーレイ画像が表示されますが、削除されませんマウスが画像を離れるとそれ。

つまり、基本的に.hove()実行されていない 2 番目の部分です。

ここに私のコード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();
});

});