Home / Questions / 466697
Accepted
Jonas
Asked: 2022-07-05 03:17:07 +0800 CST 2022-07-05 03:17:07 +0800 CST

Why does a different color appear to me using css hover

  • 772

I don't know why when I use the pseudo-class :hover I put in a menu that when the mouse hovers over it has a black border but when the transition starts it starts white.

This is the code:

.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>

It starts with a white color but then it changes to black and what I want is for the white color not to appear.

The thing is that I want it to start with the color that I chose which in this case is black and not white.

If you can help me I appreciate it.

html

1 Answers

  1. Best Answer

    The transition must start with some color, but you don't specify any for it. The solution is simple put a border color to the link to:

    .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;
}

    Notice that I add border-bottom with transparent color, I guess you don't want it to show.

    • 1