Может кто-нибудь сказать мне, почему это движение мыши не работает для правой стороны? - PullRequest
Новая
       23

Может кто-нибудь сказать мне, почему это движение мыши не работает для правой стороны?

0 голосов
/ 23 июня 2011

У меня есть DOM, который выглядит как

external nav 100% x 100%навигация влево 100% х 50%nav right 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"
                    });
                });
        });

Все контейнеры имеют абсолютную позицию, и при наведении курсора левой кнопки мыши работает великолепно, но при наведении курсора на правую часть экрана отображается около 800 пикселей справа.Я не уверен, почему, все зависает правильно, я проверил с консоли.

Я думал, что страница X и страница Y не сброшены?или правильное изображение не позиционируется абсолютно в div, а в окно ..

Есть идеи?

1 Ответ

0 голосов
/ 23 июня 2011

Прежде всего ..

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