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

您的跨度正在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 2

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

这会使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> 

Answer 3

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

Answer 4

td.matchbool span
{
   display: block;
}

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