jQuery检测悬停在单个div的左侧或右侧

Question

我有一个我正在建设的照片库,我有一个上一个和下一个按钮,根据悬停等显示和隐藏和改变不透明度.现在我有一个围绕图像本身的包装,然后我有两个div,内部宽度为50%,左边是前一个,右边是下一个.我希望通过检测何时将鼠标悬停在单个div包装器的左侧或右侧50%来执行此操作.包装纸也有不同的宽度,它使用100%宽度来调整屏幕尺寸.

我希望它取代:

$(".photo-previous, .photo-next").hover(function()
{
$(this).fadeTo(100, 1);
},
function()
{
$(this).fadeTo(100, 0.5);
}
);

使用鼠标位置而不是.photo-previous和.photo-next.

Answer 1

使用该mousemove活动.

$("#photoContainer").on('mousemove', function(e) {
    var mouseSide;
    if ((e.pageX - this.offsetLeft) < $(this).width() / 2) {
        mouseSide = 'L';
    } else {
        mouseSide = 'R';
    }
});

演示:小提琴

编辑:添加- this.offsetLeft和更新小提琴.