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>