Hover Property不适用于完整的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

将悬停JMP 0000上的空间移至.plan-box :hover

.plan-box:hover

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

Answer 2

您需要对子元素上的悬停应用负比例。

以下链接可以为您提供帮助：https://teamtreehouse.com/community/how-to-prevent-child-element-affected-by-parents-hover-state

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