YouTube自定义样式求助：视频预览时已观看覆盖层自动重现的CSS状态管理问题

各位大佬好，我最近在给YouTube写自定义用户样式表，核心需求很明确：给所有已观看视频的缩略图加上“WATCHED”覆盖层，而且当鼠标悬停触发预览视频时，这个覆盖层要平滑消失，全程不能遮挡视频预览。

但现在卡在了一个棘手的问题上：初始悬停的时候覆盖层确实会消失，但只要预览视频一开始播放，它就又自动冒出来了。看起来是视频播放器变成活跃元素后，初始的:hover状态就失效了，导致覆盖层重新显示。

背景：代码是怎么变成这样的 #

在说我尝试的解决方法之前，先给大家补个背景，这很重要。最开始我的样式表有个重复覆盖层的bug——因为里面同时有两套选择器：一套是针对旧版YouTube布局（比如历史、喜欢视频页面）的遗留规则，另一套是我为新版网格布局（比如首页）写的新规则。结果在订阅页这种混合HTML结构的页面，两套规则同时触发，直接渲染了两个覆盖层。

后来我重构了代码，把逻辑合并成了一个统一的规则：ytd-grid-video-renderer:has(#progress)，终于解决了所有页面的重复问题，但也直接导致了现在这个悬停预览的小bug。

我试过的方法和预期/实际结果 #

我已经折腾了好几种方法，但都没搞定：

1. 用:hover伪类控制

   • 尝试的代码：

     ytd-grid-video-renderer:hover #thumbnail::before { opacity: 0; }
     

   • 预期：只要鼠标悬停在缩略图上，覆盖层就一直隐藏
   • 实际：覆盖层只消失了一瞬间，视频预览一启动就又出现了。明显是YouTube的JS搞的鬼，把:hover状态给弄丢了

2. 用[is-mouse-over-for-preview]属性选择器

   • 我用浏览器检查器发现，当视频预览激活时，父元素ytd-grid-video-renderer上会自动加上is-mouse-over-for-preview这个属性，当时觉得这简直是完美的触发条件，就写了这段代码：

     ytd-grid-video-renderer[is-mouse-over-for-preview] #thumbnail::before { opacity: 0 !important; }
     

   • 预期：只要这个属性存在，覆盖层就强制隐藏
   • 实际：完全没效果！我明明能在检查器里看到元素上有这个属性，但样式就是不生效，控制台也没任何报错信息

简化的HTML结构（方便大家理解） #

悬停前的元素结构：

<ytd-grid-video-renderer class="style-scope ytd-rich-grid-row">
  <!-- 其他嵌套子元素 -->
  <a id="thumbnail" class="yt-simple-endpoint style-scope ytd-thumbnail" href="...">
    <!-- 我的“WATCHED”覆盖层是绑定在这个a标签的::before伪元素上的 -->
    <div id="progress" class="style-scope ytd-thumbnail" style="width: 100%;"></div>
  </a>
</ytd-grid-video-renderer>

视频预览激活后的元素结构：

<ytd-grid-video-renderer class="style-scope ytd-rich-grid-row" is-mouse-over-for-preview>
  <!-- 子结构和之前完全一致 -->
  <a id="thumbnail" class="yt-simple-endpoint style-scope ytd-thumbnail" href="...">
    <!-- 这里的::before伪元素应该隐藏，但实际还是显示出来了 -->
    <div id="progress" class="style-scope ytd-thumbnail" style="width: 100%;"></div>
  </a>
</ytd-grid-video-renderer>

有没有大佬遇到过类似的问题？或者能帮我分析下为什么[is-mouse-over-for-preview]这个选择器不生效吗？感激不尽！

内容来源于stack exchange