Question

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

现在，当div淡入并且我将鼠标悬停在div本身上时，它会闪烁一次。我无法弄清楚发生了什么。

你可以在这个JS小提琴中找到它：http://jsfiddle.net/y3ec7sua/1/。在这里，在＆＃39;投资组合＆＃39;部分，将鼠标悬停在绿色框（图像）上。底部的蓝色条显示出来。现在，当我将鼠标悬停在蓝色条上时，它会闪烁。我已将.stop()添加到fadeOut，但它仍然闪烁。如何在显示和悬停时保持静止而不闪烁？

此外，任何想法如何我只能将盒子悬停在显示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">和亲戚的孩子）。

因此，当您将鼠标悬停在.background上时，它会fadeIn，但是当您将鼠标悬停在.background上时，如果您稍微移动鼠标并将其悬停在.portfolio-hover上1}}它不会悬停在.background之上，因此它会fadeOut，但如果在瞬间再次移动鼠标，它将再次悬停在.background上方它再次fadeIn。

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

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

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

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

所以它只会触发fadeIn .portfolio-hover item

的

class Sample{
@Field("id")
String id;
@Field("name")
String name;
.
.
.
}

这是更新后的JSFiddle

Div在图像悬停时显示，但当我将鼠标悬停在它上面时闪烁

1 个答案: