Html 悬停效果对两个元素有效，但它应该只对一个元素有效

我正在学习CSS。我有一个问题。鼠标悬停在box元素上时，悬停效果应该会起作用。当鼠标不悬停在box元素上时，content元素位于box元素下，应该隐藏。现在我把鼠标放在box元素（content元素）下，悬停效果仍然有效。为什么会这样？还有基于我的代码的解决方案吗

正文{
保证金：0；
填充：0；
字体系列：无衬线；
}
.集装箱{
宽度：1200px；
高度：300px；
保证金：240px自动；
位置：相对位置；
}
.集装箱{
位置：相对位置；
宽度：计算（400px-30px）；
高度：计算（300px-30px）；
背景色：#000；
浮动：左；
利润率：15px；
框大小：边框框；
边界半径：10px
}
.container.box.icon{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：#f00；
过渡：0.5s；
z指数：1；
}
.container.box:悬停.icon{
顶部：20px；
左：计算（50%-40px）；
宽度：80px；
高度：80px；
边界半径：50%；
}          
.container.box.icon.fas{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
字号：80px；
颜色：#fff；
过渡：0.5s；
}
.container.box:hover.icon.fas{
字体大小：40px
}
.container.box.content{
位置：绝对位置；
填充：20px；
文本对齐：居中；
框大小：边框框；
最高：100%；
高度：计算（100%-100px）；
过渡：0.5s；
}
.container.box:hover.content{
顶部：100px；
不透明度：1；
}
.容器.盒子.内容h3{
利润率：0.10px；
填充：0；
颜色：#fff；
字体大小：24px；
}
.container.box.content p{
保证金：0；
填充：0；
颜色：#fff；
}

搜寻
Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨

开发工具是您的朋友。检查该元素，您将看到您的

div在页面上仍然可见，即使您没有悬停。将

颜色更改为黑色将显示这一点

解决方案：将

overflow:hidden

添加到

.box

类中，这样

.content

div将保持隐藏状态，除非您将鼠标悬停在

.box

div上

.container .box {
    position: relative;
    width: calc(400px - 30px);
    height: calc(300px - 30px);
    background-color: #000;
    float: left;
    margin: 15px;
    box-sizing: border-box;
    border-radius: 10px;
    overflow: hidden; /* ADD THIS */
}

---

因为content元素在那里。悬停的任何解决方案都不会影响content元素。您还在容器上添加了一个边距，该边距会触发悬停

.container.box.content{display:none；}.container.box:hover.content{display:block}

我的猜测而不运行it@epascarello动画不再有效了