隐藏和显示元素与jQuery在Chrome和边缘闪烁

Question

我想做一个简单的动画与jQuery在火狐浏览器中工作绝对好，但它在Chrome和边缘闪烁，这里是一个jsfiddle，这里是代码：

HTML

<div id="boxes-wrapper"> 
    <div class="box"></div><div class="box"></div><div class="box"></div> 
</div> 

CSS

.box { 
    width: 150px; 
    height: 150px; 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
    vertical-align: top; 
} 

.box:first-child { 
    background: pink; 
} 

.box:nth-child(2) { 
    background: skyblue; 
} 

.box:nth-child(3) { 
    background: gold; 
} 

.box.hover { 
    position: relative; 
    z-index: 20; 
} 

html, body { 
    position: relative; 
    width: 100%; 
    height: 100%; 
} 

#shadow { 
    display: none; 
    position: absolute; 
    left: 0; 
    top: 0; 
    background: black; 
    opacity: 0.7; 
    z-index: 10; 
    width: 100%; 
    height: 100%; 
} 

的JavaScript

$('.box').hover(function() { 
    $(this).addClass('hover'); 
    $('#shadow').show(); 
}, function() { 
    $(this).removeClass('hover'); 
    $('#shadow').hide(); 
}); 

我已经挖了上这么几个问题，但没有一个人回答如何摆脱闪烁的。

Answer 1

好的，问题是你的覆盖覆盖非悬空盒，所以它目前需要消失，以便悬停其他人。

闪光灯是由您的箱子之间的空间引起的 - 只要鼠标离开，叠加层就被隐藏起来。

为了解决这个问题，你需要的CSS的混合物并移动悬停覆盖到盒包装（代码中的注释）：

// remove overlay from this: 
 
$('.box').hover(function() { 
 
    $(this).addClass('hover'); 
 
}, function() { 
 
    $(this).removeClass('hover'); 
 
}); 
 

 
// add this: 
 
$('#boxes-wrapper').hover(function() { 
 
    $('#shadow').show(); 
 
}, function() { 
 
    $('#shadow').hide(); 
 
});

html, 
 
body { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#boxes-wrapper { 
 
    float: left; 
 
    /*this makes the wrapper the same width as the boxes, you may need to add a clear fix after this*/ 
 
} 
 
.box { 
 
    width: 150px; 
 
    height: 150px; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 0; 
 
    vertical-align: top; 
 
} 
 
.box:first-child { 
 
    background: pink; 
 
} 
 
.box:nth-child(2) { 
 
    background: skyblue; 
 
} 
 
.box:nth-child(3) { 
 
    background: gold; 
 
} 
 
.box.hover { 
 
    position: relative; 
 
    z-index: 20; 
 
} 
 
#shadow { 
 
    display: none; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    background: black; 
 
    opacity: 0.7; 
 
    z-index: 10; 
 
    width: 100%; 
 
    height: 100%; 
 
    /* add the following - means that the mouse hover will "go through" the overlay */ 
 
    pointer-events: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="boxes-wrapper"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div> 
 

 
<div id="shadow"></div>