DevTools未显示且无法移除的tr元素hover效果问题排查

问题描述 #

受委托使用原生CSS、JS、HTML修复某WordPress站点问题，站点产品页面存在一个异常灰色hover高亮效果：

• 效果参考：
• 可访问对应问题站点产品页直接复现查看效果

已完成排查内容 #

• 通过DevTools强制元素hover状态，确认效果作用于表格的<tr>元素
• 初步排除JS触发可能性：hover触发全程，目标元素的class、内联样式、id、自定义data属性均无任何变动
• 初步判断效果由CSS :hover规则实现，但存在两处异常：
  1. 强制元素hover状态后，DevTools样式面板未展示对应的hover样式规则
  2. 编写高优先级选择器搭配!important的自定义hover样式，仍无法覆盖该灰色效果，测试代码如下：

#bookTravelCheckout > div > div > form > table > tbody > tr:nth-child(2):hover {
    background: blue !important;
    background-color: blue !important;
}

核心疑问 #

当前无法判定效果触发源是CSS还是JS：

• 若为CSS实现，对应规则理应在DevTools中展示
• 若为JS实现，应能观测到元素样式或属性变化
  需要确认是否存在遗漏的排查方向。

可行排查方向 #

• 优先检查<tr>内部的<td>元素样式：绝大多数表格hover高亮效果实际是挂载在td上的，子元素背景层级高于父级tr，直接给tr写背景自然无法覆盖，可直接给对应tr下的td添加hover样式测试是否生效。
• 检查是否为非background属性实现的视觉高亮：比如inset内阴影、伪元素（::before/::after）绝对定位叠加层、CSS渐变背景，这类效果如果没有被显式覆盖，会盖住你写的纯色背景；其中伪元素属于元素附加节点，不会触发元素本身的属性/样式变动，很容易漏检。
• 不要只看DevTools的Styles面板，切换到Computed面板，在hover状态下直接检索background相关属性，溯源属性值的来源，部分动态注入样式、跨域引入的样式可能在Styles面板被折叠隐藏。
• 检查是否存在视觉效果类属性干扰：比如父元素挂载的filter滤镜、元素设置的mix-blend-mode混合模式，这类属性不会修改元素本身的背景色值，会造成视觉上的变色效果，看起来和hover改背景的表现完全一致。
• 临时给目标tr加上isolation: isolate属性，截断所有上层叠加上下文，快速判断是否是外部叠层导致的效果。

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