jQuery mousemove over the div and not page -

i've got image behind ipad mini in html , css , i'm trying make image slide left right along mouse when mouse on ipad mini.

i have got small piece of jquery code works when use $(document).mousemove

jsfiddle

html

<div class="ipad-mini"> </div><!--ipad-mini--> <div class="ipad-mini-actuators ipad-move"> </div><!--ipad-mini-actuators--> 

css

.ipad-mini{     position:relative;     float:left;     background:url(http://i609.photobucket.com/albums/tt179/diegosanchez88/ipad-mini-small_zpsb53e2bd8.png) no-repeat;     width: 220px;     height:330px;     overflow:hidden;     z-index:2; } .ipad-mini-actuators{     background:url(http://i609.photobucket.com/albums/tt179/diegosanchez88/actuators_zps8b1a7c1b.png) no-repeat center center;     width: 200px;     height:280px;     top:20px;     left:10px;     position:relative;     z-index:1; } 

jquery

$(document).mousemove(function(e){     var mousepos = (e.pagex/$(window).width())*100;     $('.ipad-move').css('backgroundposition', mousepos+'% 0'); });  

here code demo

$(document).on('mousemove','.ipad-mini',function(e){     var mousepos = (e.pagex/$(window).width())*100;     $('.ipad-move').css('backgroundposition', mousepos+'% 0'); });