Div在图像悬停时显示，但当我将其悬停时会闪烁

Question

我在此站点的一部分中，当我将鼠标悬停在图像（ class="background" ）上时，div会淡入（div class="portfolio-hover" ）。 这可以正常工作。

现在，当div消失并且我将鼠标悬停在div本身上时，它会闪烁一次。 我不知道发生了什么事。

您可以在以下JS小提琴中找到它： http : //jsfiddle.net/y3ec7sua/1/ 。 在这里，在“投资组合”部分中，将鼠标悬停在一个绿色框上（图像）。 底部出现蓝色条。 现在，当我将鼠标悬停在蓝色栏上时，它会闪烁。 我已经将.stop()添加到fadeOut ，但是它仍然闪烁。 显示并悬停时如何使它保持静态而不闪烁？

另外，有什么想法可以使我仅将鼠标悬停在上面以显示div，而不是一次显示所有div？

图片和div悬停的HTML部分

<div id="portfolio" class="container-fluid">
            <h1>Portfolio</h1>
            <div class="row" >
                <div class="col-sm-4" id="portfolio1">
                    <div class="portfolio_custom">
                        <img src="safe.png" class="img-responsive background"> <!-- Background Image -->
                        <div class="portfolio-hover"> <!-- Hover Content -->
                            <img src="yellow_circle.png" class="img-responsive overlay">
                            <div class="text-hover">
                                <p>HTML5/CSS3</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4" id="portfolio2">
                    <div class="portfolio_custom">
                        <img src="cake.png" class="img-responsive background"> <!-- Background Image -->
                        <div class="portfolio-hover"> <!-- Hover Content -->
                            <img src="yellow_circle.png" class="img-responsive overlay">
                            <div class="text-hover">
                                <p>HTML5/CSS3/JavaScript/jQuery</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4" id="portfolio3">
                    <div class="portfolio_custom">
                        <img src="safe.png" class="img-responsive background"> <!-- Background Image -->
                        <div class="portfolio-hover"> <!-- Hover Content -->
                            <img src="yellow_circle.png" class="img-responsive overlay">
                            <div class="text-hover">
                                <p>HTML5/CSS3/JavaScript/jQuery</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

jQuery的

$(function() {
    $('.background').hover(function(){
        $('.portfolio-hover').fadeIn(100);
    }, 
    function(){
        $('.portfolio-hover').stop().fadeOut();
    });

});

Answer 1

这是因为您的<img src="cake.png" class="img-responsive background">和<div class="portfolio-hover">处于同一位置（均为<div class="portfolio_custom">子<div class="portfolio_custom">和相对）。

因此，当您将鼠标悬停在.background ，它的确会fadeIn ，但是当您将鼠标悬停在.background ，如果将鼠标稍稍移动一点，然后将鼠标悬停在.portfolio-hover ，它将不会将鼠标悬停在.background因此进行fadeOut ，但是如果您立即再次移动鼠标一点，它将再次悬停在.background因此它会再次fadeIn 。

您需要做的是在父项上触发.portfolio_custom的hover函数，因此它仍将在当前项目的悬停中。 将代码更改为此：

$('.portfolio_custom').hover(function(){

然后只有这样，您将触发所有.portfolio-hover fadeIn和fadeOut ，因此您需要将hover的内部更改为

$('.portfolio_custom').hover(function(){
    $(this).find('.portfolio-hover').fadeIn(100);
}, 
function(){
    $(this).find('.portfolio-hover').stop().fadeOut();
});

因此，它只会触发fadeIn到.portfolio-hover item的.portfolio-hover

这是更新的JSFiddle