[英]Div Displays on Image Hover, But Blinks When I Hover Over It
I have a section of this site where when I hover over an image ( class="background"
) a div fades in (div class="portfolio-hover"
). 我在此站点的一部分中,当我将鼠标悬停在图像(
class="background"
)上时,div会淡入(div class="portfolio-hover"
)。 This works properly. 这可以正常工作。
Now, when the div fades in and I hover over the div itself, it blinks once. 现在,当div消失并且我将鼠标悬停在div本身上时,它会闪烁一次。 I can't figure out what's going on.
我不知道发生了什么事。
You can find it here in this JS fiddle: http://jsfiddle.net/y3ec7sua/1/ . 您可以在以下JS小提琴中找到它: http : //jsfiddle.net/y3ec7sua/1/ 。 Here, in the 'Portfolio' section, hover over a green box (the image).
在这里,在“投资组合”部分中,将鼠标悬停在一个绿色框上(图像)。 A blue bar on the bottom shows up.
底部出现蓝色条。 Now when I hover over the blue bar, it blinks.
现在,当我将鼠标悬停在蓝色栏上时,它会闪烁。 I already added
.stop()
to the fadeOut
, but it still blinks. 我已经将
.stop()
添加到fadeOut
,但是它仍然闪烁。 How can I get it to remain static and not blink when it's displayed and hovered over? 显示并悬停时如何使它保持静态而不闪烁?
Also, any ideas how I can get only the box being hovered over to show the div, instead of all divs showing at once? 另外,有什么想法可以使我仅将鼠标悬停在上面以显示div,而不是一次显示所有div?
HTML Section of images and div hover 图片和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 jQuery的
$(function() {
$('.background').hover(function(){
$('.portfolio-hover').fadeIn(100);
},
function(){
$('.portfolio-hover').stop().fadeOut();
});
});
It's because your <img src="cake.png" class="img-responsive background">
and <div class="portfolio-hover">
are in the same position (both are child of <div class="portfolio_custom">
and relative). 这是因为您的
<img src="cake.png" class="img-responsive background">
和<div class="portfolio-hover">
处于同一位置(均为<div class="portfolio_custom">
子<div class="portfolio_custom">
和相对)。
So when you hover over .background
, it does fadeIn
, but in the instant you hover over the .background
and if you move your mouse a little bit and it hover over .portfolio-hover
it won't hover over the .background
so it does the fadeOut
, but if in the instant you move your mouse a little bit again, it will again hover over .background
so it fadeIn
again. 因此,当您将鼠标悬停在
.background
,它的确会fadeIn
,但是当您将鼠标悬停在.background
,如果将鼠标稍稍移动一点,然后将鼠标悬停在.portfolio-hover
,它将不会将鼠标悬停在.background
因此进行fadeOut
,但是如果您立即再次移动鼠标一点,它将再次悬停在.background
因此它会再次fadeIn
。
What you need to do is trigger the hover
function on the parent which is .portfolio_custom
, so it would still in the hover for the current item. 您需要做的是在父项上触发
.portfolio_custom
的hover
函数,因此它仍将在当前项目的悬停中。 Change your code to this: 将代码更改为此:
$('.portfolio_custom').hover(function(){
Then with only that, you will trigger fadeIn
and fadeOut
to all of the .portfolio-hover
, so you need to change the inside of hover
to 然后只有这样,您将触发所有
.portfolio-hover
fadeIn
和fadeOut
,因此您需要将hover
的内部更改为
$('.portfolio_custom').hover(function(){
$(this).find('.portfolio-hover').fadeIn(100);
},
function(){
$(this).find('.portfolio-hover').stop().fadeOut();
});
So it would only trigger the fadeIn
to the .portfolio-hover
of the hovered item
因此,它只会触发
fadeIn
到.portfolio-hover
item
的.portfolio-hover
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.