Html 圆圈div悬停响应和校准问题

我有3个圆响应div。当你在其中一个上面盘旋时，它们会变大一点，但即使你在它们附近盘旋，它也会执行。此外，我需要它们与中心对齐，几乎没有响应空间

我这里有演示

还有我的密码

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

---

即使鼠标位于圆之外，圆上的动画也会被触发，因为元素本身是正方形。您可以理解我在原始示例中为元素添加大纲的意思

元素被渲染为正方形，因为您将

：before

元素作为正方形，悬停事件将由此触发。我建议完全去掉

：before

元素，只使用元素本身，如以下代码片段所示：

.kruh{
显示：内联块；
边界半径：50%；
背景：红色；
转换：转换1.0s轻松；
高度：13vw；
宽度：13vw；
}
克鲁：悬停{
转换：比例（1.15）；
}

---

即使鼠标在圆外，圆上的动画也会被触发，因为元素本身是正方形。您可以理解我在原始示例中为元素添加大纲的意思

元素被渲染为正方形，因为您将

：before

元素作为正方形，悬停事件将由此触发。我建议完全去掉

：before

元素，只使用元素本身，如以下代码片段所示：

.kruh{
显示：内联块；
边界半径：50%；
背景：红色；
转换：转换1.0s轻松；
高度：13vw；
宽度：13vw；
}
克鲁：悬停{
转换：比例（1.15）；
}

有没有办法使其成为一个完整的圆圈？谢谢，有没有办法解决对齐问题？对齐有什么问题？我需要它们与中心对齐，响应空间很小。添加了对中解决方案来回答。有没有办法使其成为一个完整的圆圈？谢谢，你知道如何解决校准的问题吗？校准有什么问题吗？我需要它们与中心对齐，响应空间很小。增加了对中解决方案。

#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;
}