悬停按钮修改表格行背景色CSS样式不生效问题（重发）

你写的末尾hover规则不生效，核心是CSS选择器用错了：

• 你用的相邻兄弟选择器+，只能选中和当前元素同属一个父级、且紧跟在当前元素后面的同级元素
• 你的.button按钮是放在表格单元格<td>内部的，而你要修改背景的<tr class="nthChild">是按钮所在<td>的父元素，既不和按钮同级，也不在按钮的相邻后方位置，原选择器完全匹配不到目标行。

另外你代码里还有个小瑕疵：transition-duration写在.button:hover规则里，只会在鼠标移入时触发过渡，鼠标移出时会没有过渡效果，这个属性应该放在.button的基础样式中。

根据你需要兼容的浏览器范围选对应方案即可：

方案1：纯CSS实现（适配2022年及之后发布的所有主流浏览器） #

用现代CSS支持的:has()父选择器，直接匹配「内部存在被hover按钮」的表格行即可，把你原来末尾错误的.button:hover + .nthChild规则替换成下面的代码：

/* 匹配包含hover状态按钮的斑马纹行，修改背景色 */
.nthChild:has(.button:hover) {
    background-color: white;
}

/* 如果需要普通行hover按钮时也改背景，可以再加一行 */
tr:not(.nthChild):has(.button:hover) {
    background-color: #e7e7e7;
}

记得把.button:hover里重复的transition-duration: 0.3s;删掉，已经在基础样式里定义过了。

方案2：JS辅助实现（兼容所有老旧浏览器） #

如果需要兼容IE、2022年前版本的Chrome/Firefox等不支持:has()的浏览器，可以用少量JS实现效果：

1. 先把CSS里错误的相邻兄弟选择器规则删掉，新增行hover样式：

tr.tr-hover {
    background-color: white !important;
}

2. 在页面脚本里加如下事件绑定：

document.querySelectorAll('.button').forEach(button => {
    // 鼠标移入按钮时，给所在行加hover类
    button.addEventListener('mouseenter', () => {
        button.closest('tr').classList.add('tr-hover');
    })
    // 鼠标移出按钮时，移除hover类
    button.addEventListener('mouseleave', () => {
        button.closest('tr').classList.remove('tr-hover');
    })
})

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