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，您將看到內容