jQuery - 图像映射悬停不起作用

$("#menu1").hover( function () {
            $(".menu-wrapper").fadeIn("slow");             
})

<div style="position:absolute; left: 18px; top: 55px;">
    <img id="top" src="images/topNavigation.png" alt="" width="578" height="42" border="0" usemap="#Map2" />
    <map name="Map2" id="Map2">
        <area shape="rect" id="menu1" coords="467,7,538,35" href="#" />
        <area shape="rect" coords="309,10,415,33" href="#" />
        <area shape="rect" coords="163,8,271,36" href="#" />
        <area shape="rect" coords="47,6,122,34" href="articles" />
    </map>
</div>
<div class="menu-wrapper">
        <ul dir="rtl">
            <li>Link 1</li>
            <li>Link 2</li>
            <li>Link 3</li>
        </ul>
    </div>