为什么我的jQuery不工作？

Question

当用户将鼠标箭头移到名为desc1的div上时，我想让map1.jpg出现，但当我将鼠标箭头移到名为desc1的div上时，我看不到任何地图出现

<div id="desc1" class="descriptions">Desc1</div>
<div id="desc2" class="descriptions">Desc2</div>
<div id="desc3" class="descriptions">Desc3</div>
<div id="themaps1" class="mymaps">
    Head Office Map <img src="map1.jpg">
</div>

<script type="text/javascript">
$(document).ready(function() {
    $('.mymaps').hide();
    $('#desc1').on("hover", function() {    
         $('#themaps1').fadeIn();
    });
});
</script>

Answer 1

使用鼠标悬停而不是悬停：http://jsfiddle.net/dehisok/TY5jg/1/

$('#desc1').on("mouseover", function() {    
     $('#themaps1').fadeIn();
});

<强> UPD

要隐藏它，您还可以添加mouseout-event：

 $('#desc1').on("mouseover", function() {    
     $('#themaps1').fadeIn();

 }).on('mouseout', function(){
     $('#themaps1').fadeOut();
 });