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：显示范围内，在行悬停