0

no se porque cuando uso la seudoclase :hover pongo en un menú que cuando se pase por encima el ratón tenga border de color negro pero al comenzar la transición comienza de color blanco.

Este es el código:

.nav-main a {
    color: white;
    text-decoration: none;
    padding: 15px !important;
    transition-property: border-bottom !important;
    transition-duration: 3s !important;
}

.nav-main a:hover {
    color: whitesmoke;
    border-bottom: 2px solid black !important;
}

.nav-main {
    font-size: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    padding: 40px !important;
    width: 100%;
    background: #4C4C6D;
}


.nav-main ul {
    padding: 50px !important;
}


ul {
    list-style: none;
}
<div class="container">
        <nav class="nav-main">
            <ul>
                <li><a href="#">Get Started</a></li>
            </ul>
            <ul>
                <li><a href="#">About Us</a></li>
            </ul>
            <ul>
                <li><a href="#">Log In</a></li>
            </ul>
            <ul>
                <li><a href="#">Sign UP</a></li>
            </ul>
        </nav>
    </div>

Comienza con un color blanco pero luego cambia a negro y lo que quiero es que no aparezca el color blanco.

La cosa es que quiero que comience con el color que elegí que en este caso es negro y no blanco.

Si me pueden ayudar lo agradezco.

1 respuesta 1

1

La transición debe comenzar con algún color, pero no le especificas ninguno. La solución es sencilla ponle un color del borde al link a:

.nav-main a {
    color: white;
    text-decoration: none;
    padding: 15px !important;
    border-bottom: 2px solid transparent !important;
    transition-property: border-bottom !important;
    transition-duration: 3s !important;
}

Observar que añado e border-bottom con color transparente, supongo que no quieres que se vea.

1
  • Muchas gracias, ha funcionado el fallo era el border-bottom en la clase normal había que ponerlo transparente.
    – Jonas
    Commented el 4 jul. 2021 a las 11:48

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.