悬停 属性 不适用于完整的 Div 而是适用于子 div

Question

我创建了一个这样的盒子：

现在我想要一个 hover 属性 来显示整个 div 的过渡，如下所示：

.plan-box {
    transition: all .2s ease-in-out !important;
  }

.plan-box :hover{
    transform: scale(1.03) !important;
}

但问题是，它不是悬停在 div 上应用，而是应用于子 div，所以例如，如果我将鼠标悬停在 4.90 上，只有那部分是动画的，但我想要为整个盒子设置动画。

完整代码片段：https://jsfiddle.net/jzktwm7g/

Answer 1

将 space 悬停在 .plan-box :hover 到 .plan-box:hover

上

.plan-box:hover {
    transform: scale(1.03) !important;
  }

https://jsfiddle.net/lalji1051/81cs7tpu/1/

Answer 2

您需要在悬停在子元素上时应用负比例尺。

这里有一个 link 可能对您有帮助：https://teamtreehouse.com/community/how-to-prevent-child-element-affected-by-parents-hover-state

示例：http://cssdeck.com/labs/zictzyap