Shopify Prestige主题视频区块链接悬停显示但无法点击求助

安全阿岳

2026-10-2

问题原因

Prestige主题内置的background-video区块对应JS逻辑默认会拦截视频容器的点击事件，避免和视频播放/暂停控制逻辑冲突，导致外层a标签的跳转行为被阻止
你当前代码中ImageHero类对应的span标签上的"display:block"属于无效属性，未写入style属性内，导致a标签的可点击区域没有完全覆盖整个视频容器，部分区域点击无法触发a标签行为
视频容器内部的ImageHero__VideoHolder元素默认z-index层级高于外层a标签，点击事件优先被该元素捕获并拦截，没有传递到外层a标签

修复方案

你可以直接用下方修正后的代码替换原有代码即可：

<a href="https://www.clarasunwoo.com/collections/best-sellers" style="display:block;width:100%;height:100%;position:relative;z-index:10;pointer-events:auto !important;">
<section class="Section" id="section-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="background-video" data-section-settings='{{ section_settings }}'>
  <span class="ImageHero {% if section.settings.section_size != 'normal' %}ImageHero--{{ section.settings.section_size }}{% endif %}" style="display:block" >
    <span class="ImageHero__VideoHolder" style="pointer-events:none;"></span>
  </span>
</section>
</a>

修复说明

给外层a标签新增了样式，强制设置为块级元素，占满整个父容器宽高，同时调高z-index保证点击事件优先被a标签捕获，开启点击响应
修正了ImageHero元素的display属性写法，写入style内生效
给ImageHero__VideoHolder加了pointer-events:none，禁止该元素拦截任何点击事件，点击会直接穿透到外层a标签

如果修改后还是不生效，可以到主题自定义设置的「自定义CSS」板块添加如下全局样式：

[data-section-type="background-video"] {
  pointer-events: none !important;
}
[data-section-type="background-video"] a {
  pointer-events: auto !important;
}