CSS：顯示範圍內，在行懸停

我需要顯示一個範圍內<td>，但只有當錢櫃<tr>徘徊。CSS：顯示範圍內，在行懸停

我已經寫了這個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做？

來源

2017-08-14 Rumpelstinsk

試試這個

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

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

希望這有助於你

來源

2017-08-14 09:22:35 PraveenKumar

我只是意識到我忘了'td'。星期一上午，我需要一些咖啡。我可以在10分鐘內接受答案。感謝您的幫助 – Rumpelstinsk

永遠歡迎:) – PraveenKumar

檢查，沒有必要跨度類，

.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>

來源

2017-08-14 09:21:49 codesayan

在實際樣品中，有在該行細胞以外的跨度。我需要班級將rul應用於特定的跨度。但是，別擔心，我發現問題得益於PravenKumar解決方案。感謝您的幫助 – Rumpelstinsk

希望它可以幫助

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>

來源

2017-08-14 09:22:13 codegeek

的問題是有

> span.showOnHover

你把一個孩子選擇「>」的聲明，只有祖先的直接孩子得到這種風格。只需擦除子選擇器，該樣式將獲得您的表格行的所有後代。

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

和

.table-hover > tbody > tr span.showOnHover

來源

2017-08-14 09:28:28 Yashia

CSS：顯示範圍內​​，在行懸停

回答

相關問題

CSS：顯示範圍內，在行懸停