CrossHair tabla MouseHover resaltado en CSS puro

Vista prévia

Descripción

Una solución CSS pura que usa z-index y : Before para crear un efecto de resaltado de CrossHair en las columnas y filas de la tabla en el desplazamiento del mouse.

Funcionamiento

Supongamos que tiene una tabla HTML con varias columnas y filas:

<table>

<thead>


<tr>



<th>Column 1</th>



<th>Column 2</th>



<th>Column 3</th>



<th>Column 4</th>



<th>Column 5</th>



<th>Column 6</th>


</tr>

</thead>

<tbody>


<tr>



<td>cell 1</td>



<td>cell 2</td>



<td>cell 3</td>



<td>cell 4</td>



<td>cell 5</td>



<td>cell 6</td>


</tr>


<tr>



<td>cell 1</td>



<td>cell 2</td>



<td>cell 3</td>



<td>cell 4</td>



<td>cell 5</td>



<td>cell 6</td>


</tr>


<tr>



<td>cell 1</td>



<td>cell 2</td>



<td>cell 3</td>



<td>cell 4</td>



<td>cell 5</td>



<td>cell 6</td>


</tr>


<tr>



<td>cell 1</td>



<td>cell 2</td>



<td>cell 3</td>



<td>cell 4</td>



<td>cell 5</td>



<td>cell 6</td>


</tr>


<tr>



<td>cell 1</td>



<td>cell 2</td>



<td>cell 3</td>



<td>cell 4</td>



<td>cell 5</td>



<td>cell 6</td>


</tr>


<tr>



<td>cell 1</td>



<td>cell 2</td>



<td>cell 3</td>



<td>cell 4</td>



<td>cell 5</td>



<td>cell 6</td>


</tr>

</tbody>
</table>

Aplique el efecto de resaltado de Cruz a las celdas de la mesa.

tbody tr:hover { background-color: rgba(255,255,255,0.3); }

tbody td:hover:before {

content: "";

position: absolute;

left: 0;

right: 0;

top: -9999px;

bottom: -9999px;

z-index: -1;

background-color: rgba(255,255,255,0.2);
}