jQuery mousemove在div而不是页面上

Question

我在html和css中有一个iPad迷你图片，当鼠标在ipad上时，我要做的是使图像从左向右滑行。

我收集了一小块jQuery，但是只有当我使用$(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');
}); 

Answer 1

这是代码演示

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