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

Question

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

Mouseover отлично работает. но 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'); 
      }); 

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

Answer 1

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

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

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

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

Демо: http://jsfiddle.net/jtbowden/29U93/

Пару другие примечания:

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

EDIT:

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

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

Демо: http://jsfiddle.net/jtbowden/S6AvH/1/

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