2

我有一个正在构建的照片库，并且我有一个上一个和下一个按钮，可以根据悬停等显示和隐藏以及更改不透明度。现在我有一个围绕图像本身的包装器，然后我在里面有两个 50% 宽度的 div，左边是上一个，右边是下一个。我想通过检测何时将鼠标悬停在单个 div 包装器的左侧或右侧 50% 上来做到这一点。包装器也有不同的可能宽度，它使用 100% 的宽度来调整屏幕尺寸。

我希望它替换：

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

使用鼠标位置而不是.photo-previousand .photo-next。

4

3 回答 3

13

使用mousemove事件。

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

演示：小提琴

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

于 2012-04-07T06:11:23.753 回答
3

我已经说过我喜欢你的其他实现，但如果你真的想用不同的方式来做，你可以使用鼠标事件的e.pageXand成员。e.pageY所以你可以做类似的事情......

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

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

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

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

于 2012-04-07T05:57:05.280 回答
-1

有一个 mouseover(function) 可以让这样的事情变得简单。

于 2012-04-07T05:59:07.800 回答