0

Lo que sucede es que ví que se podia usar la etiqueta &:hover{} , pero creo que eso ya no funciona en html 5, por que vi que la anidaban dentro de un #header{ &:hover{}} asi fue que la vi , pero eso creo que ya no se puede hacer en html. Aqui les dejo parte de mi codigo, el problema que tengo es que al momento de pasar el click por alguna palabra que tengo dentro de mi etiqueta a, no se muestran del color que yo quiero. Y ya lo intenté con &:hover pero creo que asi no va la etiqueta.

    *{
    margin: 0px; padding: 0px;
    box-sizing: border-box;
    font-family: 'Exo 2', sans-serif;
    text-transform: capitalize;
    transition: all .2s linear;
}
html{
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body{
    overflow-x: hidden;
}

#header{
    width: 100%;
    position: fixed;
    top: 0; left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 4rem;
    z-index: 1000;
}

#header > .logo > img {
    height: 5rem;
}

#header > nav > ul{
    display: flex;
    align-items: center;
    justify-content: space-around;
    list-style: none;
}

#header > nav > ul > li{
    margin-right: 4rem;
}
#header > nav > ul > li > a{
    color: #fff;
    font-size: 2rem;
}
1

2 respuestas 2

1

deberias probar de esta manera:

*{
   margin: 0px; padding: 0px;
   box-sizing: border-box;
   font-family: 'Exo 2', sans-serif;
   text-transform: capitalize;
   transition: all .2s linear;
}
html{
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body{
    overflow-x: hidden;
}

#header{
    width: 100%;
    position: fixed;
    top: 0; left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 4rem;
    z-index: 1000;
}

#header > .logo > img {
    height: 5rem;
}

#header > nav > ul{
    display: flex;
    align-items: center;
    justify-content: space-around;
    list-style: none;
}

#header > nav > ul > li{
    margin-right: 4rem;
}
#header > nav > ul > li > a{
    color: #fff;
    font-size: 2
}
.clase_de_a:hover{
    style:color_a_elegir
}

y como consejo personal deberias estudiarte metodologia bem. consiste en utilizar class para las etiquetas generales y ID para las especificas,gracias a eso te aseguras a no tener conflictos entre estilos. ejemplo.

#header{
    width: 100%;
    position: fixed;
    top: 0; left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 4rem;
    z-index: 1000;
}

.header__img{
    height: 5rem;
}

.nav__ul{
    display: flex;
    align-items: center;
    justify-content: space-around;
    list-style: none;
}

y asi con todo,espero que sea de ayuda.

1
  • Gracias Eric, le echaré un vistazo a la metodología.
    – ngr
    Commented el 7 may. 2021 a las 6:48
0

No se si te refieres a esto

*{
    margin: 0px; padding: 0px;
    box-sizing: border-box;
    font-family: 'Exo 2', sans-serif;
    text-transform: capitalize;
    transition: all .2s linear;
}
html{
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body{
    overflow-x: hidden;
}

#header{
    width: 100%;
    position: fixed;
    top: 0; left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 4rem;
    z-index: 1000;
}

#header > .logo > img {
    height: 5rem;
}

#header > nav > ul{
    display: flex;
    align-items: center;
    justify-content: space-around;
    list-style: none;
}

#header > nav > ul > li{
    margin-right: 4rem;
}
a:hover{
    color:red;
    font-size: 2rem;
}

Si es asi, solo es cosa que la ponga en la clase que necesitas y listo

3
  • Jaime!, muchas gracias amigo ya lo solucioné viendo un video. Muchas gracias de todas maneras :D , tu respuesta es acertada!
    – ngr
    Commented el 6 may. 2021 a las 2:58
  • Que bien que la pudiste solucionar, saludos. Commented el 6 may. 2021 a las 3:16
  • @BastianMatteo si te parece que responde a tu pregunta, por favor no te olvides de marcarla como aceptada (debajo de las flechas de voto)... la aceptación se puede modificar a futuro en caso de que te convenza otra respuesta
    – Pollo
    Commented el 6 may. 2021 a las 23:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.