懸停效果不適用於Chrome中的flexbox

Question

當我有一個居中放置的項目時，hover僞類在Chrome中無法正常工作。懸停只在中心項目的前3/4註冊，而不是底部季度。 gif showing the problem

#container { 
 
    margin-top: 50px; 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: rgba(67, 67, 67, 0.8); 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: flex; 
 
} 
 

 
#img-container { 
 
    height: 140px; 
 
    width: 140px; 
 
    border-radius: 140px; 
 
    background-color: blue; 
 
} 
 

 
#img-container:hover { 
 
    border: 5px solid red; 
 
} 
 

 
#under { 
 
    height: 50px; 
 
    width: 100%; 
 
}

<div id="container"> 
 
    <div id="img-container"></div> 
 
</div> 
 
<div id="under"></div>

Answer 1

管理解決它。給#img-container a z-index使得:hover正常工作。

Answer 2

當我有一箇中心項目一flexbox，這將：hover僞類成功在Chrome中正常工作。