2

Tengo una tabla con varias filas y cada fila está dividida en tres columnas, la cantidad es lo de menos.

En la columna de la mitad tengo un texto, y en las columnas de cada lado de esa misma fila unos íconos de Font Awesome.

Necesito que el estilo font-weight: bold; se aplique a toda la fila, incluyendo los íconos y no sólo al texto.

Cómo puedo lograr esto?

Añado el código, también lo pueden ver en CODEPEN

td {
padding: 10px 0;
border: 2px solid #000;
text-align: center;
cell-spacing: none;
            }

tr:hover {
background-color: #ddd;
font-weight: bold;
        }

.far:hover {
font-weight: bold;
  
}
<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>

<body>
  <table style="width:100%">
    
 <tr>
   
 <td width="10%"><i class="far fa-file-word"></i></td>
   
 <td width="80%">Lorem Ipsum</td>
   
<td width="10%"><a href="#"><i class="far fa-arrow-alt-circle-down"></i></a></td>

</tr>

<tr>
   
 <td width="10%"><i class="far fa-file-pdf"></i></td>
   
 <td width="80%">Lorem Ipsum</td>
   
<td width="10%"><a href="#"><i class="far fa-arrow-alt-circle-down"></i></a></td>

</tr>
    
<tr>
   
 <td width="10%"><i class="far fa-file-excel"></i></td>
   
 <td width="80%">Lorem Ipsum</td>
   
<td width="10%"><a href="#"><i class="far fa-arrow-alt-circle-down"></i></a></td>

</tr>    

</table>
  
</body>

2
  • Cuando necesitas colocar el font-weight: bold? cuando este hover? o siempre debe de tener ese font-weight: bold? el 4 oct. 2018 a las 22:14
  • Cuando esté en hover el 5 oct. 2018 a las 12:32

2 respuestas 2

2

Solo jugué con el selector tr:hover para lo que quieres:

td {
padding: 10px 0;
border: 2px solid #000;
text-align: center;
cell-spacing: none;
}

tr:hover td,
tr:hover td .far{
 background-color: #ddd;
 font-weight: bold;
}
<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>

<body>
  <table style="width:100%">
    
 <tr>
   
 <td width="10%"><i class="far fa-file-word"></i></td>
   
 <td width="80%">Lorem Ipsum</td>
   
<td width="10%"><a href="#"><i class="far fa-arrow-alt-circle-down"></i></a></td>

</tr>

<tr>
   
 <td width="10%"><i class="far fa-file-pdf"></i></td>
   
 <td width="80%">Lorem Ipsum</td>
   
<td width="10%"><a href="#"><i class="far fa-arrow-alt-circle-down"></i></a></td>

</tr>
    
<tr>
   
 <td width="10%"><i class="far fa-file-excel"></i></td>
   
 <td width="80%">Lorem Ipsum</td>
   
<td width="10%"><a href="#"><i class="far fa-arrow-alt-circle-down"></i></a></td>

</tr>    

</table>
  
</body>

como verás agregue tr:hover td y tr:hover td .fa, con eso quiero decir que cuando el mouse este arriba del la fila al td y al elemento que tenga la clase .far le coloque el font-weight: bold;.

Espero que sea lo que estas buscando.

1
  • Exacto, marcaré tu respuesta como correcta por el plus de la descripción de cómo lo lograste. Gracias! el 5 oct. 2018 a las 12:36
2

Este código te puede funcionar, es simple y rápido, me comentas que tal te funciona.

td {
padding: 10px 0;
border: 2px solid #000;
text-align: center;
cell-spacing: none;
}

tr:hover {
background-color: #ddd;
font-weight: bold;
}

tr:hover .far {
background-color: #ddd;
font-weight: bold;
}

REVISA EL CÓDIGO AQUÍ (CODEPEN)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.