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

时间:2011-06-22 21:50:54

标签: jquery tooltip mousemove

我有一个看起来像

的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,而是定位到窗口..

有什么想法吗?

1 个答案:

答案 0 :(得分:0)

首先......

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