Circle div懸停響應和匹配問題

Question

我有3圈回應式div。 當您將鼠標懸停在它們上時，它們會變大一點，但是即使您將鼠標懸停在它們附近，它也會被執行。 另外，我需要將它們對齊以使響應空間很小。

我在這里有演示

還有我的代碼

    <div id="kruhobal">
        <div class="kruh" id="kruh1"></div>
        <div class="kruh" id="kruh2"></div>
        <div class="kruh" id="kruh3"></div> 
    </div>

的CSS

#kruhobal
  {
    width:100%;  
}

@media only screen and (max-width:111100px)
{
.kruh
{
  display: inline-block;
    transition: transform 1.0s ease;

}
.kruh:before
{
 border-radius:50%;
    content: '';
    display: inline-block;
    padding-bottom: 0vw;
    width: 13vw;
    height: 13vw;
}
.kruh:hover
{
    transform: scale(1.15);
}
#kruh1
{

}
#kruh1:before
{
  background:red;
    background-size:cover;  
}


#kruh2:before
{
    background:red;
    background-size:cover;      

}
#kruh3:before
{   
    background:red;
    background-size:cover;
}

Answer 1

即使鼠標在圓之外，您的圓上的動畫也會被觸發，因為元素本身是正方形。 您可以通過在原始示例中為元素添加輪廓來理解我的意思。

該元素呈現為一個正方形，因為您將:before元素作為一個正方形，並且懸停事件由此觸發。 我建議完全刪除:before元素，而僅使用元素本身，如以下代碼段所示：

 .kruh { display: inline-block; border-radius: 50%; background:red; transition: transform 1.0s ease; height: 13vw; width: 13vw; } .kruh:hover { transform: scale(1.15); } 

 <div id="kruhobal"> <div class="kruh" id="kruh1"></div> <div class="kruh" id="kruh2"></div> <div class="kruh" id="kruh3"></div> </div> 

如果需要保留:before元素，另一種解決方案是也將border-radius應用於父div。

要解決問題的第二部分“如何使項目居中”，最好的方法是將flexbox應用於父元素。 我不知道您所說的“小響應空間”是什么意思，但是要在項目之間添加一些空間，您需要給每個項目留一個空白。

  #kruhobal { display: flex; justify-content: center; } .kruh { display: inline-block; border-radius: 50%; background:red; transition: transform 1.0s ease; height: 13vw; width: 13vw; margin: 0 5px; } .kruh:hover { transform: scale(1.15); } 

 <div id="kruhobal"> <div class="kruh" id="kruh1"></div> <div class="kruh" id="kruh2"></div> <div class="kruh" id="kruh3"></div> </div>