Question

我有一个看起来像

的DOM

外部导航100％x 100％
导航离开100％x 50％
导航右100％x 50％
结束外部导航

我已将此代码添加到每个

 $("<img src='/img/next.png' id='next' alt='Next Image' style='display:none;'/>").appendTo(".image-nav .image-nav-right");
        this.$('image-nav-right').mouseover(function() {
                $(this).bind('mousemove', function(event){
                    $("#prev").hide();
                    $('#next').css({
                       left:  event.pageX,
                       top:   event.pageY,
                       position: "absolute",
                       display:"block",
                       "z-index":"30000"
                    });
                });
        });
        $("<img src='/img/prev.png' id='prev' alt='Previous Image' style='display:none;'/>").appendTo(".image-nav .image-nav-left");
        this.$('image-nav-left').mouseover(function() {
                $(this).bind('mousemove', function(event){
                    $("#next").hide();
                    $('#prev').css({
                       left:  event.pageX,
                       top:   event.pageY-25,
                       position: "absolute",
                       display:"block",
                       "z-index":"30000"
                    });
                });
        });

所有容器都有一个绝对位置，左侧鼠标悬停工作非常好，但右侧鼠标悬停在右侧显示大约800px的屏幕。我不知道为什么，一切都在正常徘徊，我用控制台检查。

我以为pageX和pageY没有重置？或右图像不是绝对定位到div，而是定位到窗口..

有什么想法吗？

Answer 1

首先......

this.$('image-nav-right')和this.$('image-nav-left')应该是

$('.image-nav-right')和$('.image-nav-left')（已移除this.并将.添加到班级选择器）

然后，你真的不需要mouseover事件..直接绑定到mousemove（否则你多次绑定mousemove的事件处理程序搞砸了）

所以......更像是

$("<img src='/img/next.png' id='next' alt='Next Image' style='display:none;'/>").appendTo(".image-nav .image-nav-right");
        $('.image-nav-right').bind('mousemove', function(event){
                $("#prev").hide();
                $('#next').css({
                   left:  event.pageX,
                   top:   event.pageY,
                   position: "absolute",
                   display:"block",
                   "z-index":"30000"
                   });
        });
$("<img src='/img/prev.png' id='prev' alt='Previous Image' style='display:none;'/>").appendTo(".image-nav .image-nav-left");
        $('.image-nav-left').mousemove(function(event){
                    $("#next").hide();
                    $('#prev').css({
                       left:  event.pageX,
                       top:   event.pageY-25,
                       position: "absolute",
                       display:"block",
                       "z-index":"30000"
                    });
        });

任何人都可以告诉我为什么这个鼠标移动不适用于右手边？

1 个答案: