Estilos a celdas del mismo renglon

[adrian_]

Hola Foro necesito dar diferentes efectos al hover de dos columnas sobre un mismo renglón y la verdad no se como hacerlo espero puedan ayudarme

por ejemplo

Código HTML:

<tabla>
<tr>
<td class = 'x'></td>
<td class = 'y'></td>
</tr>
</tabla>
 

agradezco cualquier ayuda, gracias.

[pzin]

En principio no se puede hacer, porque una tabla se divide en filas, no en columnas.

Hay un pequeño truco para hacerlo. Necesitas primero ocultar lo que se va a salir de la tabla y que cada celda tenga una posición relativa:

Código CSS:

table {
  overflow: hidden;
}
 
td {
  position: relative;
}
 

Luego en el :hover, puedes usar el pseudo-elemento ::after para crear el efecto visual de las columnas. No es más que un elemento exageradamente grande y del mismo ancho que la celda. El top negativo es para que si se pasa por celdas de abajo siga igual.

Código CSS:

td:hover:after { 
  position: absolute;  
  top: -10000px;
  left: 0;
  right: 0;
  height: 20000px; 
  content: ' ';  
  background-color: yellow;
  z-index: -1;
}
 

[Mosazu]

Veo que has puesto una clase diferente a cada columna, usa esa clase.

Código:

td.x :hover{
background-color: #AFAFAF;
}
td.y :hover{
background-color: #DDDDDD;
}