CSS: Afficher travée à l'intérieur <td>, à la vol stationnaire

Je dois montrer une travée à l'intérieur d'un <td>, mais seulement lorsque le cointaner <tr> est plané.CSS: Afficher travée à l'intérieur <td>, à la vol stationnaire

Je l'ai écrit ces règles css, mais ils ne semblent pas travailler:

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

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

Jetez un oeil à: https://jsfiddle.net/59ovvrvm/1/

Je sais que je peux le faire avec jquery, mais toutes les solutions de rechange à fais-le seulement avec css?

Source

2017-08-14 Rumpelstinsk

Essayez cette

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

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

Hope this vous aide

Source

2017-08-14 09:22:35 PraveenKumar

Je viens de réaliser que j'ai oublié le 'td'. Lundi matin, j'ai besoin de café. Je peux accepter la réponse sur 10 min. Merci pour l'aide – Rumpelstinsk

Toujours la bienvenue :) – PraveenKumar

Vérifiez que, Pas besoin de classe dans la durée,

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

Source

2017-08-14 09:21:49 codesayan

Dans l'échantillon réel, il existe d'autres portées dans les cellules de la ligne. J'ai besoin de la classe pour appliquer la règle uniquement sur certaines envergures. Mais, ne vous inquiétez pas, j'ai trouvé le problème grâce à la solution PravenKumar. Merci pour l'aide – Rumpelstinsk

Hope it helps

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>

Source

2017-08-14 09:22:13 codegeek

Le problème est là

> span.showOnHover

Vous avez pris un enfant sélecteur « > » qui déclare que seuls les enfants directs de l'ancêtre obtenir ce style. Effacez simplement le sélecteur d'enfants et le style obtiendra tous les descendants de votre table-rangée.

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

.table-hover > tbody > tr span.showOnHover

Source

2017-08-14 09:28:28 Yashia

CSS: Afficher travée à l'intérieur <td>, à la vol stationnaire

Répondre

Questions connexes