CSS hover effect not working on span in table

Question

After it did work at first, I (apparently) changed something in my CSS. After hours of research I still can't figure out why the content of my <span> now won't be displayed on hover anymore...
Can anyone help me, please? Thank you!

This is a snippet of my 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;
}

And the important HTML part:

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

Note that on hover the background of the <td> does change.

Answer 1

Your span is on display: none; this means the td has no propper size to hover over it.

Try: visibility: hidden; or opacity: 0; instead of display: none; .

visibility: visible; and opacity: 1 to make it visible.

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

You are hiding the only element in the single row, single column table.

This makes the HTML collapse to save space for other controls in the page.

That does not mean that hover function is gone. It just means that the space taken up by the span will not be "reserved" as if it is invisible.

To make it more simple: if you want the cell to take the same space as it should when hovering over it, then I suggest you re-write your CSS to preserve the size of the cell, even if its content is not visible.

One way to do so is to make the font color white, but that is a lousy way.

I have included a snippet code to convince you that the cell is there, and hover works but you need to know where to point your mouse pointer. For that, I have added extra padding to the td and made it with a border so you know where to put the cursor. once your mouse is inside the border, the hover functionality will kick in and you will see the 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

For td.matchbool span and td.matchbool:hover span , use the visibility property instead of display . An invisible element will leave its space for the mouse to interact whereas non-displayed elements cannot be interacted with the mouse at all.

Answer 4

td.matchbool span
{
   display: block;
}

remove display:none from it and you will see the content