如何将文本的有效响应区域限制在其同级图像的边界范围内？

问题原因 #

你当前的交互触发范围过大主要有三个原因：

• hover效果绑定在块级元素.sub上，该容器默认宽度撑满父级，远大于内部图片的实际尺寸，容器超出图片的区域也会响应hover
• 图片设置了圆角但容器没有，图片圆角外的区域仍属于容器的可交互范围
• 图片变暗和文本显示的触发源不统一，前者绑定在图片本身，后者绑定在.sub容器，鼠标悬浮在文本上时会出现效果不同步的问题

修改步骤 #

你需要添加/修改以下CSS规则即可解决问题：

/* 限制交互容器和图片尺寸、样式完全一致 */
.sub {
  width: 300px;
  margin: 0 auto;
  border-radius: 5%;
  overflow: hidden;
  position: relative;
}

/* 统一hover触发逻辑，悬浮在容器内时同步触发图片变暗效果 */
.sub:hover .sub-image {
  opacity: 0.3;
  transition: 0.5s;
}

/* 优化图片样式，消除默认空白、自适应容器宽度 */
.sub-image {
  border-radius: 5%;
  width: 100%;
  display: block;
}

/* 禁止文本响应鼠标事件，避免额外触发hover */
.container .image-text {
  position: absolute;
  left: 0;
  right: 0;
  top: 60%;
  text-align: center;
  color: cornsilk;
  pointer-events: none;
}

注意：修改完成后请删除原代码中单独写的.sub-image:hover相关样式，避免规则冲突。

修改完成后，只有鼠标进入图片的实际显示区域（包括圆角裁剪后的边界内）时，才会触发图片变暗、文本显示的交互效果。

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