Html 如何仅在部分元素上获得悬停效果？

我有以下代码：

.container{
填充顶部：20px；
}
.容器：悬停{
背景色：红色；
}
.文本{
填充顶部：20px；
}
.货柜：在{
内容:"以前";；
顶部：5px；
位置：绝对位置；
}

我的文字

为防止背景覆盖填充物，请添加

背景剪辑：内容框到
.container
：


.container{
填充顶部：20px；
背景剪辑：内容框；
}
.容器：悬停{
背景色：红色；
}
.文本{
填充顶部：20px；
}
.货柜：在{
内容:"以前";；
顶部：5px；
位置：绝对位置；
}

我的文字
为防止背景覆盖填充物，请添加
背景剪辑：内容框到
.container
：


.container{
填充顶部：20px；
背景剪辑：内容框；
}
.容器：悬停{
背景色：红色；
}
.文本{
填充顶部：20px；
}
.货柜：在{
内容:"以前";；
顶部：5px；
位置：绝对位置；
}

我的文字
一个简单的解决方案是在容器类上使用边距顶部，而不是填充顶部


.container{
边缘顶部：30px；
背景剪辑：内容框；
}
.容器：悬停{
背景色：红色；
}
.文本{
填充顶部：20px；
}
.货柜：在{
内容:"以前";；
顶部：5px；
位置：绝对位置；
}

我的文字
一个简单的解决方案是在容器类上使用边距顶部，而不是填充顶部


.container{
边缘顶部：30px；
背景剪辑：内容框；
}
.容器：悬停{
背景色：红色；
}
.文本{
填充顶部：20px；
}
.货柜：在{
内容:"以前";；
顶部：5px；
位置：绝对位置；
}

我的文字
您可以尝试悬停.text而不是.container，并为伪元素提供“初始”或“透明”背景

就我的0.02美元：
我希望你明白，至少可以说，这整件事很奇怪。它将限制任何进一步的自定义，如字体高度等。每次添加新的文本行时，您都需要调整填充、边距或顶部。老实说，我不明白什么样的应用程序具有如此严格的外观，不能让您添加元素。
您可以尝试悬停.text而不是.container，并为伪元素提供“初始”或“透明”背景

就我的0.02美元：
我希望你明白，至少可以说，这整件事很奇怪。它将限制任何进一步的自定义，如字体高度等。每次添加新的文本行时，您都需要调整填充、边距或顶部。老实说，我不明白什么样的应用程序具有如此严格的外观，不能让您添加元素。
为什么不使用后代选择器？您也可以嵌套在
：hover
下。并带有
显示：块也不需要使用固定大小的边距和填充


.container:hover.text{
背景色：红色；
}
.文本{
display:block；/*或只使用div*/
}
.货柜：在{
内容:"以前";；
显示：块；
}

我的文字
为什么不使用后代选择器？您也可以嵌套在
：hover
下。并带有
显示：块也不需要使用固定大小的边距和填充


.container:hover.text{
背景色：红色；
}
.文本{
display:block；/*或只使用div*/
}
.货柜：在{
内容:"以前";；
显示：块；
}

我的文字