html - 嵌套的div可以忽略父级的悬停吗

Question

如果一个div 嵌套在另一个div 中，嵌套的div 是否可以忽略父级的悬停。这是一个例子

.Box {
  width: 50px;
  height: 50px;
  background: red;
}

.Circle {
  width: 20px;
  height: 20px;
  background: blue;
  border-radius: 20px;
}

.Box:hover {
  animation: expand .5s normal forwards;
}

@keyframes expand {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.6);
  }
}

<div class="Box">
  <div class="Circle"></div>
</div>

在这个例子中，是否有一种方法可以使 Box 展开而不是 Circle

Answer 1

从技术上讲，父级 hover 事件不会应用于子级。

但在您的情况下，子级仍然受到影响，因为您正在缩放父级。因此，父级内部的所有内容也都在缩放。

为了对抗嵌套 div 的缩放，您可以在悬停父级 div 时应用反向缩放效果。

.Box{
   width: 50px;
   height: 50px;
   background: red;
}

.Circle{
   width: 20px;
   height: 20px;
   background: blue;
   border-radius: 20px;
}

.Box:hover{ 
    animation: expand .5s normal forwards;
}

.Box:hover .Circle {
    animation: contract .5s normal forwards;
}

@keyframes expand {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.6);
    }
}

@keyframes contract {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.625);  /* 1 / 1.6 */
    }
}

<div class="Box">
    <div class="Circle"></div>
</div>