javascript - jQuery .hover() 奇怪的行为

Question

我想用 HTML、CSS 和 jQuery 创建一个图片库。我创建了一个 div，当我的鼠标进入另一个 div 时它会出现。但是当我的鼠标进入 div 时，另一个 div 出现一次，消失，然后又出现。我该如何解决这个问题？

jQuery

$(function(){
    // stock dans des variables
    var dark = $('.hov');
    var img = $('img');

    // cacher les hover
    dark.hide();

    // montrer au survol de l'image
        img.mouseenter(function(){
            $(this).next().fadeIn('slow');
        });
        img.mouseleave(function(){
            $(this).next().fadeOut('slow');
        }); 
});

HTML

<div class="row">
            <div class="col-md-4">
                <img src="http://placehold.it/350x250">
                <div class="hov"></div>
            </div>
            <div class="col-md-4">
                <img src="http://placehold.it/350x250">
                <div class="hov"></div>
            </div>
            <div class="col-md-4">
                <img src="http://placehold.it/350x250">
                <div class="hov"></div>
            </div>
        </div>

Answer 1

我认为你应该试试这个: https://jsfiddle.net/km3ewek5/1/

(注意 mouseleave 在 dark 元素上)

$(function(){
    // stock dans des variables
    var dark = $('.hov');
    var img = $('img');

    // cacher les hover
    dark.hide();

    // montrer au survol de l'image
        img.mouseenter(function(){
            $(this).next().fadeIn('slow');
        });
        dark.mouseleave(function(){
            $(this).fadeOut('slow');
        }); 
});