Question

我有3个圈子响应div。当你将鼠标悬停在一个上时，它们会变得更大，但即使你将悬停在附近，它也会被执行。此外，我需要将它们对齐到中心，并且响应空间很小。

我在这里有演示demo

我的代码

    <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>

圈子div悬停响应和aligment问题

1 个答案: