JQuery Mouseover/MouseOut мерцает

Question

У меня есть следующий HTML

<div class="individual"> 
    <div class="change">change</div> 
    <div class="picture"><img src....></div> 
</div> 

.change имеет position: absolute; и невидим. На mouseover .picture, я хочу, чтобы .change появлялся, и на mouseout, чтобы исчезнуть. Если человек нажимает .change, тогда что-то должно произойти.

Прямо сейчас, когда мышь переходит на смену, тогда она воспринимается как изображение мыши, и поэтому изменение начинает мерцать!

Я тогда сделал это JQuery:

$('.change').mouseout(function(){ 
    $('.picture').mouseout(function(){ 
     $(this).parent().children('.change').hide(); 
    }); 
}); 

$('.picture').mouseover(function(){ 
    var i = $(this).parent().children('.change').show(); 
}); 

Это отлично работает только в первый раз! Если я выйду из картины, тогда, когда я вернусь, и продолжаю менять, все начинает мерцать! Что я делаю?!

Благодаря

Answer 1

Используйте «MouseEnter» вместо «наведения курсора» и «MouseLeave» вместо «отведения указателя мыши»

$('.picture').mouseenter(function(){ 
    $(this).parent().children('.change').hide(); 
}); 



$('.picture').mouseleave(function(){ 
    var i = $(this).parent().children('.change').show(); 
}); 

Answer 2

Проблема заключается в том, что скрывается .change переместит .picture элемента к месту, где .change раньше был. Это вызовет как .mouseover(), так и .mouseenter(), поэтому нет смысла заменять.

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

Answer 3

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

$(function() { 
    $('.picture').hover(function() { 
     $('.change').show(); 
    },function() { $('.change').hide(); }); 
}); 

До тех пор, как появление «.Кнопка» не двигается «.picture», в результате чего парение будет нарушено, то это должно работать для вас.