CSS 将鼠标悬停在堆叠元素上

Question

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

<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, 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，正如预期的那样，所有元素都会产生效果。

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

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

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

Answer 1

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

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

CSS 将鼠标悬停在堆叠元素上

CSS Hover on stacked elements

css

hover