为什么我的jQuery不工作？

Question

我想要当用户移动鼠标了箭头以上格称为DESC1，但我没有看到任何地图出来，当我将我的鼠标箭头在所谓DESC1

<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

使用鼠标悬停在div map1.jpg出现而不是悬停：http://jsfiddle.net/dehisok/TY5jg/1/

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

UPD

要隐藏它，你还可以添加鼠标移出事件：

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

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