鼠标悬停图片时overflow:hidden未生效，如何实现滑出文本框？

问题根源 #

你当前的CSS是给.app-image-caption本身绑定hover事件，但这个元素默认通过transform: translateY(100%)移出了父容器.app-image，再加上父容器的overflow:hidden，导致鼠标根本无法触碰到这个caption元素，自然触发不了动画。

解决方案 #

不需要移除overflow:hidden（这个属性是用来隐藏初始状态下滑出框的，是必要的），核心是把hover事件绑定到父容器.app-image上，这样只要鼠标悬停在图片区域（父容器范围内），就能触发滑出框的动画。

修改后的CSS代码如下：

.app-image {
  position: relative;
  overflow: hidden; /* 保留该属性，用于隐藏初始状态的滑出框 */
}

.app-image-caption {
  position: absolute;
  top: 0;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-cloud);
  padding: 40px 32px;
  background-color: var(--color-iris);
  height: 100%;
  width: 100%;
  transform: translateY(100%);
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* 将hover事件绑定到父容器，确保鼠标悬停图片区域时触发动画 */
.app-image:hover .app-image-caption,
.app-image:focus-within .app-image-caption { /* 新增focus-within，支持键盘导航触发 */
  transform: translateY(0);
}

补充说明 #

之前尝试从.app-image移除或转移overflow:hidden没用，是因为问题的核心不是这个属性的位置，而是hover事件的绑定对象错误。保留overflow:hidden能确保初始状态下滑出框不会超出父容器显示，同时不影响悬停时的动画效果。

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