захват события jQuery mouseout - PullRequest
Новая
       28

захват события jQuery mouseout

0 голосов
/ 10 октября 2009

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

<ul>
   <li><img src="1" alt="" /></li>
   <li><img src="2" alt="" /></li>
</ul>

При наведении курсора мыши я хочу добавить div внутри этого <li> с большим z-индексом, чем img, чтобы div находился "впереди" изображения (как панель со ссылками для редактирования изображения). При мышлении я хочу, чтобы он исчез. Проблема в том, что эти изображения постоянно меняются (загружаются с помощью метода загрузки), и я пробовал что-то вроде этого: 

$('img').live('mouseover',function(){
    $(this).append('<div>links links</div>');
});

$('img').live('mouseout',function(){
    $('div').remove()
});

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

Как я могу сделать это правильно?

Ответы [ 3 ]

2 голосов
/ 10 октября 2009

В зависимости от требований совместимости вашего браузера, вы можете просто сделать это с помощью css, используя: hover.

Включите теги img и тег div так, как вы хотите, чтобы они были в вашей разметке, затем используйте css следующим образом: 

ul li div {
  display: none;
}

ul li:hover div{
  display: block;
}

Для размещения div над тегом img это действительно зависит от остальной части макета вашей страницы. Если изображения всегда имеют одинаковые размеры, вы можете использовать отрицательные смещения полей с позицией пикселя в div.

Вы также можете добиться хороших эффектов затухания в браузерах на основе webkit, если используете настройку непрозрачности: 

ul li div {
  opacity: 0;
  -webkit-transition: opacity .33s linear;
}

ul li:hover div{
  opacity: 1;
}
0 голосов
/ 10 октября 2009

Свяжите ваше событие с li вместо img. Таким образом, событие mouseout сработает только тогда, когда курсор покинет и div, и img.

0 голосов
/ 10 октября 2009

Взгляните на parent ()

http://docs.jquery.com/Traversing/parent

РЕДАКТИРОВАТЬ: родитель не работает с живой, мой плохой. Как насчет этого: 

$('li').live('mouseover',function(){
    $(this).children().hide();
    $(this).append('<div>links links</div>');
});

$('li').live('mouseout',function(){
    $('div').remove();
    $(this).children().show();
});
...