JQuery Mouseout срабатывает при внедрении дочернего элемента - PullRequest
Новая
       9

JQuery Mouseout срабатывает при внедрении дочернего элемента

1 голос
/ 13 февраля 2009

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

<div class="thumb"><img src="i/testThumb.gif" /></div>

А вот и мой JQuery ... 

$('.thumb').live('mouseover', function(event){
    if($(this).find('.overlay').length == 0){
        $(this).prepend('<div class="overlay"></div>');
    }
    return false;
});
$('#galleryPanel .thumb').live('mouseout', function(event){
    $(this).find('.overlay').remove();
    return false;
});

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

Есть ли простое решение для этого?

Ответы [ 3 ]

1 голос
/ 14 февраля 2009

Если вы добавите еще один div в микс, я думаю, вы найдете то, что ищете. 

<style>
.hover { display:none;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script>
$(document).ready(function(){

   $(".image").hover(
   function(over) {
     $(this).find(".hover").animate({opacity: "show", top: "55"}, "slow");
   },
   function(out) {
     $(this).find(".hover").animate({opacity: "hide", top: "55"}, "slow");
   });

}); 
</script>

<div class='image'>
    <div class='imageClass'>
        <img src='img1.jpg' />

        <div class='hover'>
            <img src='img1.jpg' />
        </div>

    </div>
</div>
1 голос
/ 14 февраля 2009

Вместо привязки mouseout к ".thumb", пытаясь привязать его к ".overlay". 

$('#galleryPanel .overlay').live('mouseout', function(event){
    $(this).remove();
    return false;
});
0 голосов
/ 13 февраля 2009

Это может звучать немного странно, но вы можете использовать переменную (в случае элемента dom, я бы использовал класс css), чтобы узнать, происходит ли это событие в первый раз, когда событие запускается для этого элемента.

По сути, ваша функция ищет наличие этого класса css в элементе dom, но его нет по умолчанию при его создании. Если его там нет, добавьте класс и выйдите из функции. Если он есть, попадание действительно, и вы должны выполнить свою функцию наложения. Поскольку вы можете иметь несколько классов в элементе dom, это не должно вызывать никакого конфликта с другими классами, используемыми для стиля. Я бы сказал, пойти с классом вместо пользовательского атрибута, потому что пользовательские атрибуты делают ваш HTML "недействительным" для поисковых роботов.

...