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.

  • es.davy.ai/
  • Programación /
  • Cómo activar el efecto de hover en los elementos secundarios al pasar el cursor sobre el div padre?

Cómo activar el efecto de hover en los elementos secundarios al pasar el cursor sobre el div padre?

28 Jul, 2023 Programación

Actualmente, estoy trabajando en una aplicación web nextJS y tengo algunos problemas con el CSS. Tengo un div (nodo padre) y dentro del div tengo varios elementos secundarios. Así que siempre que pase el cursor sobre el elemento div padre, quiero que también se active en los elementos secundarios.

Por ejemplo, esta es una versión simplificada de mi código:

export default function portfolio() {
return (
    

        

            
01

        

        

            
Telegram Bot

        

    

    )
}

Así que siempre que pase el cursor sobre el div padre (.mainContent), cambiará el color de fondo, así como los elementos secundarios (Title Number y Title Name), cambiarán el color de la fuente y aumentarán el tamaño de la fuente, simultáneamente.

¿Alguien puede iluminarme sobre cómo hacerlo usando nextJS? Gracias.

EDITADO

No estoy seguro de si esto funciona…


      
Num

      
Name





.main {
  background: blue; 
}

.main:hover {
  background: green;
}

.main:hover .num,
.main:hover .name {
  color: red;
  font-weight: bold;
}

¿Hay una mejor manera de hacer esto? Porque parece un poco desordenado especialmente cuando tengo alrededor de 6 elementos secundarios para activar todos a la vez. ¿Hay alguna forma de hacer el código más conciso y elegante?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para activar los elementos secundarios cuando se pasa el ratón sobre el elemento principal en CSS, se puede utilizar el selector descendiente.

    Por ejemplo:

    .mainContent:hover {
  background-color: #ccc;
}

.mainContent:hover h2 {
  font-size: 24px;
  color: #fff;
}

    Esto se dirigirá a todas las etiquetas h2 que son descendientes de .mainContent cuando pases el ratón sobre .mainContent. Puedes agregar más estilos para otros elementos secundarios según sea necesario.

    Para hacer tu código más conciso, puedes utilizar un preprocesador de CSS como SASS o LESS. Estas herramientas te permiten utilizar variables, anidamiento y otras características para escribir CSS más organizado y conciso. Por ejemplo:

    $main-color: blue;

.mainContent {
  background-color: $main-color;

  &:hover {
    background-color: green;

    h2 {
      font-size: 24px;
      color: red;
      font-weight: bold;
    }
  }
}

    Esto te permite definir variables para colores, fuentes y otros estilos, y utilizarlos en todo tu CSS. El operador & se utiliza para referirse al elemento principal en Sass, lo que facilita escribir estilos anidados.

Comments are closed.