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占用的空间不会被保留＆＃34;好像它是看不见的。

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

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

我已经包含了一个代码段来说服您单元格在那里，并且悬停工作，但您需要知道指向鼠标指针的位置。为此，我在td添加了额外的填充，并使用边框使其知道放置光标的位置。一旦您的鼠标位于边框内，hover功能就会启动，您将看到span

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 3

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

Answer 4

td.matchbool span
{
   display: block;
}

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

CSS悬停效果不适用于表中的span

4 个答案: