Проблемы с mouseover и mouseout

У меня есть сетка изображений, когда мышь находится над любым изображением, увеличенная версия этого изображения становится наложением исходного изображения сетки с немного большей версией.

Наведение мыши работает отлично. но mouseout и mouseleave вызывают мгновенное исчезновение большего изображения. Кончилась мышь или нет.

        function imageSize(img){
              var theImage = new Image();
              $(theImage).load(function() {
                var imgwidth = this.width;
                var imgheight = this.height;
                var position = img.parent().position()
                var index = img.parent().index();


                ///calculate top
                var top     = (position.top -((imgheight-img.height())/2));
                var left    = (position.left -((imgwidth-img.width())/2));


                /// place image in img_pop
                var clone;
                clone = '<div class="pop_img clone'+index+'"></div>';
                $(clone).insertAfter($('BODY'));


                $('.pop_img.clone'+index+'').css({
                    'width'                 :   img.width(),
                    'height'                :   img.height(),
                    'top'                   :   position.top,
                    'left'                  :   position.left,
                    'backgroundImage'       :   'url('+theImage.src+')',
                });

                    $('.pop_img.clone'+index+'').stop().animate({
                        'height'    :   imgheight,
                        'top'       :   top,
                        'width'     :   imgwidth,
                        'left'      :   left,
                    },300,'easeInOutQuad');

              });
              theImage.src = img.attr('src');
            }

            $('.am-wrapper img').live('mouseenter',function(){
                imageSize($(this));
            });

            $('.am-wrapper img').live('mouseleave',function(){
                thisIndex = $(this).parent().index();
                $('.pop_img.clone'+thisIndex+'').fadeOut('200');
            });

В идеале я хочу, чтобы наложенное изображение оставалось видимым и оставалось на месте, пока мышь находится над соответствующим изображением сетки. Когда пользователь наводит указатель мыши на другое изображение сетки, старое наложение исчезает.


person Chris Samson    schedule 11.04.2012    source источник


Ответы (1)


Проблема в том, что когда всплывает оверлей, он блокирует событие мыши от нижележащего элемента. Он в основном крадет события мыши из всего, что находится под ним. Итак, вы получаете событие mouseout для элемента под ним.

Несколько сложно срабатывать по положению мыши относительно базового элемента. Возможно, вам потребуется создать событие mousemove, которое проверяет, покидает ли мышь границы исходного div.

Если вы можете жить с немного другой функциональностью, вы можете активировать mouseout на оверлейном изображении.

Вот демонстрация, которую я собрал вместе с сеткой изображений, которая закрывает другие наложения, когда вы mouseenter другой элемент сетки (который не находится под наложением):

Демонстрация: http://jsfiddle.net/jtbowden/29U93/

Еще пара замечаний:

  1. Почему вы используете new Image()? Просто используйте встроенную функцию клонирования jQuery.
  2. Вы делаете $(clone).insertAfter($('BODY')). Вы не можете добавлять что-либо после body по закону. Вам нужно сделать appendTo('body').

ИЗМЕНИТЬ:

Я понял, что есть довольно простой способ сделать это!

Создайте прозрачную сетку с высоким z-индексом, которая находится поверх сетки изображения, с элементами div, соответствующими элементам вашей сетки. Используйте их, чтобы вызвать всплывающее окно (под прозрачной сеткой).

Демонстрация: http://jsfiddle.net/jtbowden/S6AvH/1/

Эта демонстрация создает прозрачную сетку вручную и размещает ее с помощью javascript, но вы можете сделать все это с помощью javascript.

person Jeff B    schedule 11.04.2012
comment
да, я подумал, что наложение может быть. Я думаю, вы правы, нужно какое-то определение параметра. :( - person Chris Samson; 12.04.2012
comment
@ChrisSamson: Эврика! Я вспомнил, как я делал это раньше. См. мое редактирование выше. - person Jeff B; 12.04.2012
comment
сладкий. Забавно, насколько просто решение на самом деле. Просто нужно было немного бокового мышления. Большое спасибо - person Chris Samson; 12.04.2012
comment
также быстрое примечание. new Image() был использован, потому что оверлейное изображение обычно представляет собой URL-адрес большого пальца, а не маленького. - person Chris Samson; 12.04.2012
comment
О, я вижу. Вы хотели убедиться, что изображение загружено, прежде чем появится оверлей? Попался. - person Jeff B; 12.04.2012