es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Tabla de dos direcciones sobre React con función de desplazamiento de puntero

06 Aug, 2023 Programación

Quiero que mi tabla sea de doble sentido con efecto hover, como en esta imagen:

enter image description here

Actualmente, mi css es el siguiente:

 tr {
        &:hover {
          background-color: #f1efeb;
        }
        &:first-child {
          z-index: 1;
          position: relative;
        }
        &:not(:first-child) {
          td {
            &:not(:first-child) {
              &:hover {
                &::after {
                  background-color: #f1efeb;
                  content: '';
                  height: 10000px;
                  left: 0;
                  position: absolute;
                  top: -5000px;
                  width: 100%;
                  z-index: -1;
                }
              }
            }
          }
        }
        padding-bottom: 5rem;
        td {
          padding: 12px;
          vertical-align: text-top;
          position: relative;
          word-wrap: break-word;
        }
      }

Usando este css, solo se resalta la fila. Quiero resaltar también la columna.
Nota: La primera columna y la primera fila no se deben resaltar al pasar el cursor por encima. Gracias de antemano.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer la tabla bidireccionalmente resaltable al pasar el mouse sobre ella, puedes modificar el código CSS existente agregando estilos de resaltado para la primera columna y fila también. Aquí tienes el código CSS actualizado:

    table {
  border-collapse: collapse;
  width: 100%;
}

tr {
  &:hover {
    background-color: #f1efeb;
  }
}

tr:first-child {
  th:first-child {
    z-index: 1;
    position: relative;
  }
}

td:first-child {
  &:not(:first-child) {
    &:hover {
      &::after {
        background-color: #f1efeb;
        content: '';
        height: 100%;
        left: -5000px;
        position: absolute;
        top: 0;
        width: 10000px;
        z-index: -1;
      }
    }
  }
}

td:not(:first-child) {
  &:hover {
    &::before {
      background-color: #f1efeb;
      content: '';
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: -1;
    }
  }
}

    Aquí tienes un desglose de los cambios realizados:

    • Se añadieron estilos table para asegurar un espaciado de borde adecuado entre las celdas.
    • Se añadieron estilos tr:first-child y th:first-child para evitar que la primera fila y columna se resalten al pasar el mouse sobre ellas.
    • Se añadieron estilos td:first-child para resaltar la primera columna al pasar el mouse sobre ella.
    • Se añadieron estilos td:not(:first-child) para resaltar todas las demás columnas al pasar el mouse sobre ellas.
    • Se añadió el pseudo-elemento &::before para resaltar la columna sobre la cual se pasa el mouse.
    • Se ajustó la posición y dimensiones de los pseudo-elementos ::before y ::after para asegurar una cobertura completa del área resaltada.

    Con estos cambios, tu tabla ahora debería ser bidireccionalmente resaltable, con la primera fila y columna sin resaltado.

Comments are closed.