jquery - ページではなくdiv上でのjQueryのマウス移動

Question

私はhtmlとcssでiPad miniの背後にある画像を持っています。私がやろうとしているのは、マウスがiPad miniの上にあるときにマウスと一緒に画像を左から右にスライドさせることです。

私は小さなjQueryをまとめましたが、コードは使用した場合にのみ機能します$(document).mousemove

jsフィドル

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');
});