Html CSS中不正确的行和列突出显示

我试图在悬停表格时同时突出显示特定的行和列。但不知何故，只有列的悬停覆盖了整个数据

这是我的密码：

.planStat{
溢出：隐藏；
}
.planStat tr：悬停{
背景：#ffaa00；
}
.planStat tr:hover td{
位置：相对位置；
}
.planStat tr:hover td:hover:：after{
内容：“；
位置：绝对位置；
背景色：#ffa；
左：0；
顶部：-5000px；
高度：10000px；
宽度：100%；
z指数：1；
}

名称
沃钦斯顿登
阿尔贝期
索尔
IST
差异

您需要将

z-index

设置为

-1

.planStat{
溢出：隐藏；
}
.planStat tr：悬停{
背景：#ffaa00；
}
.planStat tr:hover td{
位置：相对位置；
}
.planStat td:hover:：after{
内容：“；
位置：绝对位置；
背景色：#ffa；
左：0；
顶部：-5000px；
高度：10000px；
宽度：100%；
z指数：-1；
}

名称
沃钦斯顿登
阿尔贝期
索尔
IST
差异
索尔
IST
差异
索尔
IST
差异
索尔
IST
差异

使用jQuery是一件很简单的事情。可能不仅仅是css解决方案，但代码更少，更易于阅读：

$（'td'）。悬停（函数（）{
var td=$（本）；
td.addClass（'highlight'）//悬停的td
.sides（）.addClass（'highlight'）；//行
td.parent（）.sides（）//其他tr
.children（）//他们的td
.eq（td.index（））//具有与原始td相同的索引
.addClass（'highlight'）；//TADAAAA:-）
}，函数（）{
var td=$（本）；
td.removeClass（'highlight'）
.sides（）.removeClass（'highlight'）；
td.parent（）.sides（）.children（）.eq（td.index（））.removeClass（'highlight'）；
});
.planStat td.highlight{
背景：#ffaa00；
}

名称
沃钦斯顿登
阿尔贝期
索尔
IST
差异
请您重新表述一下您想要实现的内容，它有点难读。我正在尝试实现这一点：我有点困惑您为什么不使用您已经提供的代码片段，您想要更改什么？你可以看到我改变了什么，请告诉我，这是你需要的吗？是的，这正是我要找的。但我正试图通过SASS实现这一目标。我只是把生成的CSS代码放在这里。我确实将z-index设置为-1，但与JSFIDLE中不同的是，悬停时没有颜色。你知道吗？@Tarekis不，他不知道。他只是说他试图用css实现这一点。也许他不知道js选项。。。？投票失败没有真正的原因，但正如你所愿。除了使用JS解决CSS可解决问题的原因是不好的做法之外，因为它需要在客户端提高性能，OP在
CSS
下标记了它，并在标题中说明了它是他想要使用和正在使用的技术。我之所以投反对票，是因为我认为你的解决方案是基于刚才给出的对这个问题不是很好的原因，而这正是投反对票的原因。