jquery - jQuery mousemove 在 div 而不是页面上

Question

我在 html 和 css 中的 iPad mini 后面有一个图像，我想做的是当鼠标悬停在 ipad mini 上时，使图像随鼠标从左向右滑动。

我收集了一小部分 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');
});