CSS 悬停效果在 table 中的跨度上不起作用

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

td.matchbool span
{
   display: block;
}

从中删除display:none，您将看到内容

Answer 2

你的 span 开启了 display: none; 这意味着 td 没有适当的大小可以悬停在它上面。

尝试：visibility: hidden; 或 opacity: 0; 而不是 display: none;。

visibility: visible; 和 opacity: 1 使其可见。

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

td.matchbool span{
  visibility: hidden;
}

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

Answer 3

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

这会使 HTML 折叠以保存 space 用于页面中的其他控件。

这并不意味着 hover 功能消失了。只是表示被span占据的space不会像看不见一样变成"reserved"。

为了让它更简单：如果您希望单元格在悬停时采用相同的 space，那么我建议您重新编写 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>

Answer 4

对于 td.matchbool span 和 td.matchbool:hover span，请使用 visibility 属性而不是 display。一个不可见的元素将离开它的 space 以供鼠标交互，而不显示的元素根本无法与鼠标交互。

CSS 悬停效果在 table 中的跨度上不起作用

CSS hover effect not working on span in table

html

css

html-table

hover