如何在CSS中实现鼠标悬停某div时移动另一个div？

你的代码里，CSS选择器.divToHover:hover .divToMove是在寻找.divToHover的子元素中的.divToMove，但实际这两个div是同级关系（都在container里），所以这个选择器匹配不到目标元素，动画自然不会生效。

修正方案：使用兄弟选择器 #

可以用相邻兄弟选择器+（适用于两个div紧挨着的情况）或者通用兄弟选择器~（适用于两个div之间还有其他元素的情况），修改CSS中的触发选择器即可：

修改后的完整代码：

.divToMove {
  transform: translateY(-100%);
}

@keyframes slideIn {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(-35%);
  }
}

/* 使用相邻兄弟选择器，匹配.divToHover紧挨着的下一个.divToMove */
.divToHover:hover + .divToMove {
  animation: slideIn 0.5s forwards;
}

/* 如果两个div之间有其他元素，改用通用兄弟选择器：
.divToHover:hover ~ .divToMove {
  animation: slideIn 0.5s forwards;
}
*/

<div class="container">
  <!-- Hover -->
  <div class="divToHover">
    Hover me!
  </div>
  <!-- Moved -->
  <div class="divToMove">
    Moving Div
  </div>
</div>

这样当你悬停.divToHover时，同级的.divToMove就会从Y轴-100%的位置过渡到-35%的位置了。

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