Html 悬停属性不适用于完整Div，而是适用于子Div

我创建了这样一个框：

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

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

现在我想要一个

hover

属性来显示整个

div的转换，如下所示：

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

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

但问题是，它不是在
div
时应用悬停，而是应用于子div，因此，例如，如果我将鼠标悬停在
4.90
上，则只会对该部分设置动画，但我希望对整个长方体设置动画

完整代码片段：
删除悬停时的空格
。计划框：悬停到
。计划框：悬停

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

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

以下链接可能会帮助您：

示例：
非常感谢，它成功了。但是你能解释一下为什么空格会导致这个问题吗？css选择器空格表示子元素不是目标元素谢谢，我会在时间限制后接受答案。
。test:hover
表示你的目标是
：hover
元素（它不可能存在），它是类为
test
的元素的后代，因此，类似于
的情况是，如果删除空格，则意味着您希望在悬停在类上时应用样式。