CSS：顯示內部跨度 <td> ，在懸停時

Question

我需要顯示<td>內的跨度，但僅當將cotantaner <tr>懸停時才顯示。

我已經寫了這個CSS規則，但是它們似乎不起作用：

.table-hover > tbody > tr:hover > span.showOnHover {
    display:block!important;
}

.table-hover > tbody > tr > span.showOnHover {
    display: none !important;
}

看一下： https : //jsfiddle.net/59ovvrvm/1/

我知道我可以用jquery做到這一點，但是有其他選擇只能用css嗎？

Answer 1

希望能幫助到你

 span{ display:none } tr:hover > td > span{ display:inline-block; } 

 <table id="tableSample" class="table table-hover table-sindi table-sindi-select sindi-actions"> <thead> <tr> <th>Usuario</th> <th>Comentario</th> </tr> </thead> <tbody> <tr> <td>Usuario 1</td> <td> Comentario 1 <span class="showOnHover">!FOCUS</span> </td> </tr> <tr> <td>Usuario 1</td> <td> Comentario 1 <span class="showOnHover">!FOCUS</span> </td> </tr> </tbody> </table> 

Answer 2

嘗試這個

.table-hover > tbody > tr:hover > td > span.showOnHover {
  display:block;
}

.table-hover > tbody > tr > td >  span.showOnHover {
  display: none;
}

希望這對您有幫助

Answer 3

檢查一下，不需要上課，

 .table-hover > tbody > tr:hover span{ display:inline-block; } .table-hover > tbody > tr span { display: none; } 

 <table id="tableSample" class="table table-hover table-sindi table-sindi-select sindi-actions"> <thead> <tr> <th>Usuario</th> <th>Comentario</th> </tr> </thead> <tbody> <tr> <td>Usuario 1</td> <td> Comentario 1 <span class="showOnHover">!FOCUS</span> </td> </tr> <tr> <td>Usuario 1</td> <td> Comentario 1 <span class="showOnHover">!FOCUS</span> </td> </tr> </tbody> </table> 

Answer 4

問題在那里

> span.showOnHover

您使用了子選擇器“>”，它聲明只有祖先的直接子代才具有此樣式。 只需刪除子選擇器，樣式將獲得表行的所有后代。

.table-hover > tbody > tr:hover span.showOnHover

和

.table-hover > tbody > tr span.showOnHover