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