html - CSS 悬停效果不适用于表格中的跨度

Question

在它开始工作后，我(显然)改变了我的 CSS 中的一些东西。经过几个小时的研究，我仍然无法弄清楚为什么我的 <span> 的内容。现在将不再在悬停时显示...
任何人都可以帮助我吗？谢谢!

这是我的 CSS 片段:

td.matchbool {
  text-align: center;
  box-shadow: inset 0px 0px 0px 10px #fff;
}
td.matchbool:hover{
  background:#e2e236;
  width:400px;
}

td.matchbool span{
  display: none;
}

td.matchbool:hover span{
  z-index: 9999;
  width: 300px;
  border-left: 5px solid #e2e236;
  display: block;
  padding: 1px;
}

还有重要的 HTML 部分:

<table><tr>
  <td class='matchbool'>
    <span>
      Some Content
    </span>
  </td>
</tr></table>

请注意，将鼠标悬停在 <td> 的背景上确实改变了。

Answer 1

您隐藏了单行单列表中的唯一元素。

这会使 HTML 折叠起来，从而为页面中的其他控件节省空间。

这并不意味着 hover 功能消失了。它只是意味着 span 占用的空间不会被“保留”，就好像它是不可见的一样。

为使其更简单:如果您希望单元格在悬停时占用相同的空间，那么我建议您重新编写 CSS 以保留单元格的大小，即使其内容不是可见的。

这样做的一种方法是将字体颜色设为白色，但这是一种糟糕的方法。

我包含了一个片段代码来让您相信单元格就在那里，并且悬停有效，但您需要知道将鼠标指针指向何处。为此，我在 td 中添加了额外的填充，并为其添加了边框，以便您知道将光标放在哪里。一旦您的鼠标位于边框内，hover 功能将启动，您将看到 span

td.matchbool {
  text-align: center;
  box-shadow: inset 0px 0px 0px 10px #fff;
  padding: 10px;
  border: 1px dashed grey;
}
td.matchbool:hover {
  background: #e2e236;
  width: 400px;
}
td.matchbool span {
  display: none;
}
td.matchbool:hover span {
  z-index: 9999;
  width: 300px;
  border-left: 5px solid #e2e236;
  display: block;
  padding: 1px;
}

<table>
  <tr>
    <td class='matchbool'>
      <span>Some Content</span>
    </td>

  </tr>
</table>