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

演示：fiddle

编辑：添加了- this.offsetLeft并更新了小提琴。

Answer 2

我已经说过我喜欢你的其他实现，但是如果你真的想以不同的方式做到这一点，你可以使用鼠标事件的e.pageX和e.pageY成员。所以你可以做点像......

$("#wrapper").mouseover(function(e){
    var x = e.pageX - $(this).offsetLeft;

    if(x < $(this).width() / 2)
        //left
    else
        //right
});

这使它变得动态，所以包装器的宽度并不重要。

我确信jquery UI的鼠标插件有一些内置方法可以获取相对鼠标位置。

Answer 3

有一个鼠标悬停（功能）使这样的事情变得容易。

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

3 个答案: