CSS 填充仅在悬停后应用答案

【问题标题】：CSS paddings are aplied only after hoverCSS 填充仅在悬停后应用
【发布时间】：2019-12-27 00:15:27
【问题描述】：

我正在构建 React 应用程序，在过去的几个小时里，我一直在与奇怪的问题作斗争。 td 上的 CSS 填充在该单元格上的 hover 之后应用，但它们应该在之前应用。

我尝试将填充从padding: ... 拆分为padding-right/left... 以及许多其他内容。在 html 模板中它工作正常，但在反应中它表现得很奇怪。

用于填充的 CSS 如下所示

.itemsList .contentList .itemsLisTtabs  table td {
  position:relative;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-right: 1%;
  padding-left:1%;
  overflow:hidden;
}

悬停CSS：

.itemsList.itemsList_rollingStock table td:nth-child(3) span:hover{
  cursor: pointer;
  opacity: 0.6;
}

你可以看到这个行为 gif.

我可以看到在开发人员工具中应用了填充，但在视觉上它不是。如果我在开发人员工具中取消单击并单击该填充，它也会修复。如果有人能帮忙，我会很高兴的。

【问题讨论】：

你的相关内容是什么 - minimal reproducible example - HTML？
这看起来很奇怪。它可能是浏览器问题，您已经发现了一个错误，但更有可能是在悬停时添加了填充。你能检查和切换悬停在它可能的所有元素上，看看你是否可以复制这种行为吗？如果没有有效的代码示例，很难帮助调试太多，但是您链接的 sn-ps 看起来都很好。

标签： css reactjs css-selectors

【解决方案1】：

您应该为非悬停状态使用与悬停状态相同的选择器，:hover 部分和td 除外，即

.itemsList.itemsList_rollingStock table td {
  position:relative;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-right: 1%;
  padding-left:1%;
  overflow:hidden;
}

【讨论】：