Question

我正在构建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.

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

Answer 1

除了:hover部分和td为止（即

），对于未悬停状态和悬停状态，应使用相同的选择器

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

CSS填充仅在悬停后才加贴

1 个答案: