Shopify站点如何实现商品图片悬停时显示图上覆盖的商品标题

原有代码失效原因 #

• CSS相邻兄弟选择器+仅能匹配当前元素后方紧邻的同级元素，你的代码中#tit_pro元素位于.ProductItem__LabelList元素前方，选择器无法命中目标。
• 原代码将hover触发绑定在商品标签元素上，而非商品图片容器，不符合悬停图片触发的需求，同时缺少定位样式，无法实现标题覆盖在图片上方的效果。

正确实现步骤 #

1. 调整HTML结构 #

将商品标题、商品标签、商品图片统一放在同一个图片容器内，参考结构如下：

<!-- 商品图片外层容器，hover触发事件绑定在该元素上 -->
<div class="product-image-wrapper">
  <!-- 保留主题原有商品图片代码 -->
  <img src="商品图链接" alt="商品缩略图" />
  <!-- 保留原有商品标签 -->
  <span class="ProductItem__Label Heading Text--subdued">New</span>
  <!-- 悬停显示的商品标题 -->
  <span id="tit_pro">MYSHA FUCHSIA SCHIFFLI-ORGANZA DRESS</span>
</div>

如果你的主题商品模块本身已有图片外层容器（常见类名如ProductItem__ImageWrapper、card__media），无需额外新增容器，直接把标题元素放到容器内部即可。

2. 替换CSS样式 #

删除原有失效的CSS代码，替换为以下内容：

<style>
/* 标题默认隐藏，配置悬浮覆盖样式 */
#tit_pro {
  display: none;
  position: absolute;
  z-index: 9;
  /* 可自行调整标题位置、颜色、字体等样式 */
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  color: red;
  background: rgba(255,255,255,0.9);
  padding: 6px 12px;
  font-size: 14px;
}
/* 给图片容器设置相对定位，作为标题定位的参照 */
.product-image-wrapper {
  position: relative;
}
/* 悬停图片容器时显示内部标题 */
.product-image-wrapper:hover #tit_pro {
  display: block;
}
</style>

如果你用的是主题自带的图片容器，把上面CSS里的.product-image-wrapper替换成你主题实际的图片容器类名即可，类名可以通过浏览器右键检查元素获取。

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