CSS 悬停在堆叠元素上

如何解决CSS 悬停在堆叠元素上

我目前有多个堆叠元素 - 图像 + 文本 + 图标，并且只希望在任何元素悬停时图标动画。

<style>
  .hvr-forward {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  Box-shadow: 0 0 1px rgba(0,0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-forward:hover,.hvr-forward:focus,.hvr-forward:active {
  -webkit-transform: translateX(15px);
  transform: translateX(15px);
}
</style>

<div class="container hvr-forward">
   <div class="1"><img src="image.jpg"></div>
   <div><p class="2">Some Text <i class="3"></i></p></div>
</div>

如果我将悬停效果应用到容器 div 上，那么所有元素都会有效果。

如果我只对图标应用悬停效果，我仍然需要在图像或文本悬停时出现效果。

是否可以通过类 1、2 上的 css 禁用动画以保留悬停区域但只有 3 个使用效果？

非常感谢任何帮助或指导。

解决方法

当您将鼠标悬停在容器上时，您必须这样做，图像的样式应该有效。

.hvr-forward:hover .1,.hvr-forward:focus .1,.hvr-forward:active .1 {
  -webkit-transform: translateX(15px);
  transform: translateX(15px);
}