鼠标移至绝对定位覆盖文本时图片hover效果丢失的解决方法

这个问题我太熟悉了！核心原因是你的文本叠加层是独立的绝对定位元素，当鼠标移到文本上时，相当于离开了<img>元素的触发范围，所以图片的hover样式就消失了。下面给你两种靠谱的解决方案，按需选择：

方案一：父元素hover控制（推荐，不影响文本交互） #

这种方法把hover事件绑定到包裹图片和文本的父元素（也就是<a>标签），这样不管鼠标在图片还是文本上，父元素都会处于hover状态，进而控制图片的阴影效果。

修改后的CSS代码： #

/* 给外层容器加上相对定位，确保文本叠加层定位准确 */
.col-xs-6.col-sm-3 {
  position: relative;
}

img {
  margin-top: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 0px 2px #b2b2b2;
}

/* 把hover触发转移到父元素a，控制img的样式 */
a:hover img {
  box-shadow: 0px 0px 0px 2px #f47c20;
}

.text-overlay {
  color: #fff;
  position: absolute;
  top: 40px;
  left: 32px;
}

方案二：让文本层“穿透”鼠标事件（适合不需要文本交互的场景） #

如果你的文本叠加层不需要被点击或选中，可以给它加上pointer-events: none，这样鼠标会直接忽略文本层，事件穿透到下方的图片上，自然就能保持hover效果了。

修改后的CSS代码（只改文本层样式）： #

.text-overlay {
  color: #fff;
  position: absolute;
  top: 40px;
  left: 32px;
  pointer-events: none; /* 关键属性 */
}

两种方案都能解决你的问题，优先推荐方案一，因为它保留了文本层的交互能力（比如文本可选中、如果有链接也能点击）。

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