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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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