隱藏和顯示元素與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>