¿Cómo cambiar la opacidad de cada elemento de datos al pasar el mouse sobre una tabla usando CSS?

Hay una tabla hecha con HTML en la que los elementos de datos se establecen en una opacidad baja. La tarea es cambiar la opacidad de un elemento en particular cuando el usuario pasa el mouse sobre los elementos de datos.

Para que una tabla se vea mejor, usaremos colores degradados para configurar los fondos de los elementos de datos de la tabla. En este enfoque, usaremos la propiedad de opacidad de CSS para completar la tarea.

opacidad:

<table>
  <tr>
    <td> data 1</td>
    <td> data 2</td>
    <td> data 3</td>
  </tr>
</table>

Las etiquetas de encabezado de tabla <th> tienen estilo con texto blanco y color de fondo degradado.
Para las etiquetas de elementos de datos de tabla, la opacidad se establece inicialmente en 0,7, con un fondo degradado claro que parece desvanecido inicialmente.
Al pasar el mouse , la opacidad del elemento se establece en 1, esto hace que el elemento sea claro y definido.
```
td:nth-child(odd):hover {
    opacity: 1;
}
```
Para todos los hijos impares de la etiqueta <td>
```
td:nth-child(even):hover{
    opacity: 1;
}
```

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>Table Styling</title>
      
    <style>
        h1 {
            text-align: center;
            margin-top: 5vw;
            color: green;
        }
  
        table {
            margin-left: 25vw;
        }
  
        th {
            text-align: center;
            width: 200px;
            color: white;
            background-image:linear-gradient(
                to bottom, #6B8E23, #556B2F);
            height: 40px;
            padding: 0px 10px;
            border-bottom: 3px solid #9ACD32;
            border-radius: 5px 5px 0px 0px;
        }
  
        td:nth-child(odd):hover {
            opacity: 1;
        }
  
        td:nth-child(even):hover {
            opacity: 1;
        }
  
        td {
            opacity: 0.7;
            border-radius: 2px;
            text-align: center;
            vertical-align: middle;
            height: 40px;
            background: rgb(144, 238, 144, 0.3);
            padding: 0px 10px;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Address</th>
        </tr>
        <tr>
            <td>Name 1</td>
            <td>Age 1</td>
            <td>Address 1</td>
        </tr>
        <tr>
            <td>Name 2</td>
            <td>Age 2</td>
            <td>Address 2</td>
        </tr>
        <tr>
            <td>Name 3</td>
            <td>Age 3</td>
            <td>Address 3</td>
        </tr>
        <tr>
            <td>Name 4</td>
            <td>Age 4</td>
            <td>Address 4</td>
        </tr>
    </table>
</body>
  
</html>

Producción:

Puede ver que cuando el mouse pasa sobre los elementos <td>, su opacidad cambia a 1 y parecen más claros y definidos.

Publicación traducida automáticamente

Artículo escrito por taran910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta