Change text color with :Hover, but does not work CSS3

Asked

Viewed 640 times

-2

I’m using the pseudo-class :hover to change the style of an element <li>, when I move the mouse over. The background-color works, but the color of the text does not. I have no idea why. It follows below my html:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Desafio Menu</title>
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        header {
            background-color: #060012;
        }

        a {
            font-family: Arial, Helvetica, sans-serif;
            font-weight: 900;
            color: #ffffff
        }

        .autenticacao {
            position: absolute;
            width: 150px;
            right: 5px;
            top: 40px;
            float: right;
            /* padding-right: 50px; */
            box-sizing: border-box;
            clear: both;
        }

        nav {
            position: absolute;
            /* float: left; */
            left: 330px;
            top: 30px;
            /* padding: 10px 20px; */
        }
        li {
            position: relative;
            margin: 5px;
            float: left;
            list-style-type: none;
        }
        li:hover {
            background-color:lightseagreen; 
           color: #000;
         }

        .logo {
            position: relative;
            top: 5px;
            bottom: 5px;
            left: 10px;
            width: 310px;
            height: 70px;
        }

        #logo {
            max-width: 300px;
            max-height: 90px;
            width: auto;
            height: auto;
        }

        .menu-toggle {
            position: absolute;
            right: 5px;
            top: 5px;
            display: none;
            clear: right;
        }
    </style>
</head>

<body>
    <header class="cabecalho">
        <div class="logo">
            <a href="#inicio">
                <img id="logo" src="http://files.cod3r.com.br/curso-web/logo.png" alt="Logo" />
            </a>
        </div>
        <button class="menu-toggle">
            <i class="fa fa-lg fa-bars"></i>
        </button>
        <nav class="menu">
            <ul>
                <li>
                    <a href="#inicio">Início</a>
                </li>
                <li>
                    <a href="#cursos">Cursos</a>
                </li>
                <li>
                    <a href="#sobre">Sobre</a>
                </li>
                <li>
                    <a href="#contato">Contato</a>
                </li>
            </ul>
        </nav>
        <aside class="autenticacao">
            <a href="#login">Login</a>
            <a href="#registar" class="botao destaque">Registrar</a>
        </aside>
    </header>

    <script>
        
    </script>
</body>

</html>

css3 web-application

2 answers

3

In the case of your example, you are applying the properties color: #000 and background-color: lightseagreen; in the element <li>, you must use them in the element <a>.

Before:

li:hover {
    background-color: lightseagreen; 
    color: #000;
}

Afterward:

a:hover {
    background-color: lightseagreen;
    color: #000;
}

Upshot:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Desafio Menu</title>
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        header {
            background-color: #060012;
        }

        a {
            font-family: Arial, Helvetica, sans-serif;
            font-weight: 900;
            color: #ffffff
        }

        .autenticacao {
            position: absolute;
            width: 150px;
            right: 5px;
            top: 40px;
            float: right;
            /* padding-right: 50px; */
            box-sizing: border-box;
            clear: both;
        }

        nav {
            position: absolute;
            /* float: left; */
            left: 330px;
            top: 30px;
            /* padding: 10px 20px; */
        }
        
        li {
            position: relative;
            margin: 5px;
            float: left;
            list-style-type: none;
        }

        a:hover {
            color: #000;
            background-color:lightseagreen;
        }

        .logo {
            position: relative;
            top: 5px;
            bottom: 5px;
            left: 10px;
            width: 310px;
            height: 70px;
        }

        #logo {
            max-width: 300px;
            max-height: 90px;
            width: auto;
            height: auto;
        }

        .menu-toggle {
            position: absolute;
            right: 5px;
            top: 5px;
            display: none;
            clear: right;
        }
    </style>
</head>

<body>
    <header class="cabecalho">
        <div class="logo">
            <a href="#inicio">
                <img id="logo" src="http://files.cod3r.com.br/curso-web/logo.png" alt="Logo" />
            </a>
        </div>
        <button class="menu-toggle">
            <i class="fa fa-lg fa-bars"></i>
        </button>
        <nav class="menu">
            <ul>
                <li>
                    <a href="#inicio">Início</a>
                </li>
                <li>
                    <a href="#cursos">Cursos</a>
                </li>
                <li>
                    <a href="#sobre">Sobre</a>
                </li>
                <li>
                    <a href="#contato">Contato</a>
                </li>
            </ul>
        </nav>
        <aside class="autenticacao">
            <a href="#login">Login</a>
            <a href="#registar" class="botao destaque">Registrar</a>
        </aside>
    </header>

    <script>
        
    </script>
</body>

</html>

-2

I know. I’m changing the text color of <li>. But the text in there is <a>.

So it was like this:

li {
  position: relative;
  padding: 10px 5px;
  margin: 5px;
  float: left;
  list-style-type: none;
}

li:hover {
  background-color: lightseagreen;
}

li a:hover {
  color: rgb(0, 0, 0);
  text-decoration-style: none;
}

Browser other questions tagged css3 web-application

You are not signed in. Login or sign up in order to post.