CSS悬停效果不适用于表格中的跨度答案

【问题标题】：CSS hover effect not working on span in tableCSS悬停效果不适用于表格中的跨度
【发布时间】：2015-09-18 16:34:21
【问题描述】：

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

这是我的 CSS 的 sn-p：

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> 的背景会发生变化。

【问题讨论】：

你有没有看到问题之前的原始代码？事实上，很难确切地知道你想要什么。

标签： html css hover html-table

【解决方案1】：

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

这会使 HTML 折叠以节省页面中其他控件的空间。

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

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

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

我已经包含了一个 sn-p 代码来说服您该单元格在那里，并且悬停可以工作，但是您需要知道将鼠标指针指向哪里。为此，我在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>

【讨论】：

@l0w_skilled 的答案更简单，但你的答案很适合展示到底发生了什么
感谢您的回答。你很好地解释了正在发生的事情。但我实际上希望“某些内容”在悬停时出现在表格单元格之外的另一个框中。我想我的问题解释得不够清楚。你能给我另一个提示我怎么能做到这一点吗？那太好了！
好吧，我自己搞定了。再次感谢您的精彩解释。这很有帮助。
对不起，6 小时前我没有注意到你的评论，直到现在。我很高兴您发现我的回答内容丰富。 @妮娜

【解决方案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;
}

【讨论】：

感谢您的回答。使用可见性而不是显示它确实可以工作，但是原始（未悬停的）表格单元格现在始终具有“某些内容”的高度，这不是很漂亮。你能帮我解决这个问题吗？非常感谢！
我自己找到了一个更好的显示解决方案，而不是可见性，但再次感谢您的回答！

【解决方案3】：

对于td.matchbool span 和td.matchbool:hover span，使用visibility 属性而不是display。不可见的元素会留出空间让鼠标进行交互，而非显示的元素则根本无法与鼠标进行交互。

【讨论】：

【解决方案4】：

td.matchbool span
{
   display: block;
}

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

【讨论】：

OP 希望将其隐藏，直到您将其悬停在其父级 td