为什么将鼠标悬停在错误的元素上会触发CSS动画？

在单个元素上悬停时，我希望照片消失，文本出现，还有我已经实现的框阴影动画

问题是，当我在最上面一行的前两个元素中的任意一个上来回悬停时，最下面一行元素的动画会被触发，整个菜单都会产生抖动

您可能必须完整地查看代码段才能看到

有什么解决办法吗

/*----------------------------------------------
*由Animista于2018-8-7 19:10:49生成
*w:http://animista.net，t:@cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
*动画阴影弹出br
* ----------------------------------------
*/
.影子流行音乐{
-webkit动画：阴影流行br 0.3s立方贝塞尔（0.470,0.000,0.745,0.715）两种；
动画：阴影波普br 0.3s立方贝塞尔（0.470,0.000,0.745,0.715）两种；
}
@-webkit关键帧阴影弹出br{
0% {
框阴影：0 0红色、0 0红色、0 0红色、0 0红色、0 0红色、0 0红色、0 0红色、0 0红色、0 0红色；
-webkit转换：translateX（0）translateY（0）；
变换：translateX（0）translateY（0）；
}
100% {
盒影：1px 1px红色，2px 2px红色，3px 3px红色，4px 4px红色，5px 5px红色，6px 6px红色，3px 3px红色，8px 8px红色；
-webkit转换：translateX（-8px）translateY（-8px）；
转换：translateX（-8px）translateY（-8px）；
}
}
h1{
字体系列：Lato；
字体大小：粗体；
字体大小：48px；
文本对齐：居中；
保证金：自动；
}
.集装箱{
显示器：flex；
柔性包装：包装；
证明内容：中心；
填充顶部：50px；
最大宽度：960像素；
保证金：0px自动；
}
.容器：悬停{
显示器：flex；
}
.叠加标题{
颜色：黑色；
不透明度：0；
字体大小：30px；
字体系列：Lato；
字体大小：粗体；
位置：绝对位置；
宽度：75%；
最高：38%；
左：50%；
-webkit转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
文本对齐：居中；
}
.叠加说明{
颜色：黑色；
不透明度：0；
字体大小：20px；
字体系列：Lato；
位置：绝对位置；
宽度：75%；
最高：50%；
左：50%；
-webkit转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
文本对齐：居中；
}
.card1{
位置：相对位置；
显示器：flex；
高度：300px；
宽度：275px；
边界半径：3px；
背景图片：url(https://images.unsplash.com/photo-1447005497901-b3e9ee359928?ixlib=rb-0.3.5&q=85&fm=jpg&crop=熵&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=41c3909e41fa718e1800d556884fd9fc）；
背景位置：中心；
背景尺寸：250px；
背景重复：无重复；
}
.卡img{
显示：块；
左边距：自动；
右边距：自动；
最大高度：178px；
}
.card1:悬停{
动画：阴影流行br；
动画持续时间：.3s；
动画填充模式：正向；
背景图像：无；
}
.card1:悬停.覆盖标题{
不透明度：1；
}
.card1:悬停.覆盖说明{
不透明度：1；
}
.card2{
位置：相对位置；
显示器：flex；
高度：300px；
宽度：275px；
边界半径：3px；
背景图片：url(https://images.unsplash.com/photo-1447005497901-b3e9ee359928?ixlib=rb-0.3.5&q=85&fm=jpg&crop=熵&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=41c3909e41fa718e1800d556884fd9fc）；
;
背景位置：中心；
背景尺寸：250px；
背景重复：无重复；
左边距：30px；
右边距：30px；
}
.card2：悬停{
动画：阴影流行br；
动画持续时间：.3s；
动画填充模式：正向；
背景图像：无；
}
.card2:悬停.覆盖标题{
不透明度：1；
}
.card2:悬停.覆盖说明{
不透明度：1；
}
.card3{
显示器：flex；
高度：300px；
宽度：275px；
边界半径：3px；
背景图片：url(https://images.unsplash.com/photo-1447005497901-b3e9ee359928?ixlib=rb-0.3.5&q=85&fm=jpg&crop=熵&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=41c3909e41fa718e1800d556884fd9fc）；
背景位置：中心；
背景尺寸：100px；
背景重复：无重复；
}
.card3:悬停{
动画：阴影流行br；
动画持续时间：.3s；
动画填充模式：正向；
背景图像：无；
}
.card3:悬停.覆盖标题{
不透明度：1；
}
.card3:悬停.覆盖说明{
不透明度：1；
}
.card4{
显示器：flex；
高度：300px；
宽度：275px；
边界半径：3px；
背景图片：url(https://images.unsplash.com/photo-1447005497901-b3e9ee359928?ixlib=rb-0.3.5&q=85&fm=jpg&crop=熵&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=41c3909e41fa718e1800d556884fd9fc）；
;
背景位置：中心；
背景重复：无重复；
背景尺寸：200px；
右边距：15px；
}
.card4:悬停{
动画：阴影流行br；
动画持续时间：.3s；
动画填充模式：正向；
背景图像：无；
}
.card4:悬停.覆盖标题{
不透明度：1；
}
.card4:悬停.覆盖说明{
不透明度：1；
}
.card5{
显示器：flex；
高度：300px；
宽度：275px；
边界半径：3px；
背景图片：url(https://images.unsplash.com/photo-1447005497901-b3e9ee359928?ixlib=rb-0.3.5&q=85&fm=jpg&crop=熵&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=41c3909e41fa718e1800d556884fd9fc）；
;
背景位置：中心；
背景尺寸：250px；
背景重复：无重复；
左边距：15px；
}
.card5:悬停{
动画：阴影流行br；
动画持续时间：.3s；
动画填充模式：正向；
背景图像：无；
}
.card5:悬停.覆盖标题{
不透明度：1；
}
.card5:悬停.覆盖说明{
不透明度：1；
}

组合动画
近期项目

在代码中使用此选项：

.container > a { position:relative; }

---

你没有在所有的“a”标签上使用这个，这就是为什么它会发生。

它对我来说很好。。。