鼠标悬停单个元素时实现双元素不同方向动画的问题排查

我希望实现鼠标悬停在.section元素上时，让其中的Email.svg与PhoneNumber.svg两个元素分别向不同方向执行动画效果。当前代码仅能使PhoneNumber.svg产生动画，Email.svg无动画反应；此前尝试的方案虽能让两者同时动画，但方向一致。请问我哪里操作有误？

现有代码 #

HTML #

<div class="section">
  <img src="/AP/Email.svg" />
  <div class="layer"><img src="/AP/PhoneNumber.svg"></div>
</div>

CSS #

.section {
  position: absolute;
  transition: transform 1.5s ease-out;
  margin-top: 12%;
  margin-left: -1%;
}

.layer {
  position: absolute;
  transition: transform 1.5s ease-out;
  margin-top: 4%;
  margin-left: 4%;
}

.section:hover img {background-color: red;}

.section:hover .layer {transform: translate(15%)}

问题原因与修正方案 #

你当前的代码只给.layer（即PhoneNumber.svg的父容器）设置了悬停时的transform动画，而Email.svg对应的<img>元素没有被赋予任何位移动画规则，自然不会产生位移效果。

要实现两者向不同方向动画，需要分别为两个元素设置独立的transform规则：

1. 直接选择.section下的直接子元素<img>（对应Email.svg），给它设置与.layer相反的位移方向
2. 确保两个元素的过渡动画属性生效（.layer已配置，Email.svg的<img>可继承父元素的transition，也可单独设置）

修正后的CSS代码 #

.section {
  position: absolute;
  transition: transform 1.5s ease-out;
  margin-top: 12%;
  margin-left: -1%;
}

.layer {
  position: absolute;
  transition: transform 1.5s ease-out;
  margin-top: 4%;
  margin-left: 4%;
}

/* 为Email.svg设置向左的位移动画 */
.section:hover > img {
  background-color: red;
  transform: translate(-15%);
}

/* PhoneNumber.svg保持向右的位移 */
.section:hover .layer {
  transform: translate(15%);
}

修改后，鼠标悬停在.section上时，Email.svg会向左移动15%，PhoneNumber.svg会向右移动15%，实现不同方向的动画效果。

内容的提问来源于stack exchange，提问作者egg_it