jquery - Internet Explorer と Mouseenter 関数

Question

私は独学で JQuery を教えていて、ちょっとした障害に遭遇しました。私が行ったことは、画像の上に div をレイヤー化し、可視性を非表示に設定し、JQuery を使用して、画像にマウスを入力するとボックスが表示され、マウスを離れるとボックスが消えることを示しています。これは Firefox では問題なく動作しますが、IE では、マウス オーバーすると単語のみが表示され、マウスが div を離れても単語は消えません。

この質問がさまざまな形で尋ねられていることは知っていますが、これまでのところ、私の研究では実行可能な答えが得られていません. アドバイスをいただければ幸いです。

私のHTML：

<table>
<td class=presentation>
<a href="Capabilities-PDF.html" target="_blank"> <div class="cover hidden1"> Learn About Us </div> </a>
<div class="image1"><img
  title="Capabilities"
  alt="Capabilities"
  src="images/thumbnails/Capabilities.png"
class="img"></div></td>
</table>
</body>

私のJavaScript：

$(document).ready(function(){
$('.image1').mouseover(function(){
    $('.hidden1').show();
    });
$('.hidden1').mouseout(function(){
    $(this).hide();
});

私のCSS：

.cover{
background-color: rgba(0, 0, 0, 0.7);
height: 131px;
position: absolute;
width: 175px;
z-index: 1;
text-align: center;
color: ffffff;
font-weight: bold;
text-decoration: none;

}

.hidden1 {
display: none;
}
.image1 {
height: 131px;
width: 175px;
overflow: hidden;
}