How to change the text color inside the navigation bar-CodePudding

I'm new to CSS and I'm trying to figure out how to change the text color when hovered. I've tried what i have found online but it still won't work when hovered the text is still black Below is my HTML code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600&display=swap"
      rel="stylesheet"
    />

    <link rel="stylesheet" href="./css/style.css" />
    <title>Deux Citronella Trading</title>
  </head>
  <body>
    <nav>
      <div class="logo">
        <h4>LOGO</h4>
      </div>
      <ul class="nav-links">
        <li class="nav-link"><a href="#">Home</a></li>
        <li class="nav-link"><a href="#">About</a></li>
        <li class="nav-link"><a href="#">Contact</a></li>
        <li class="nav-link"><a href="#">Products</a></li>
      </ul>
    </nav>
  </body>
</html>

And this is my CSS:

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  font-family: "Poppins", sans-serif;
  background-color: white;
  overflow: hidden;
}

.logo {
  color: black;
  text-transform: uppercase;
  letter-spacing: 10px;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 20%;
}

.nav-links li {
  list-style: none;
  padding: 25px 40px;
}

.nav-links a {
  color: black;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 15px;
}

nav li:hover {
  color: white !important;
  background-color: rgb(6, 168, 106);
}

I'm also wondering why i can't cover the whole navigation when being hovered to, as you can see on the screenshot below

is there also a way for me to cover or change the whole background color of the navigation bar when being hovered to?

CodePudding user response：

You need to target your anchor separately and have two hover declarations. Add the following (in addition to the CSS for your list item):

nav li:hover a {
  color:#fff;
}

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  font-family: "Poppins", sans-serif;
  background-color: white;
  overflow: hidden;
}

.logo {
  color: black;
  text-transform: uppercase;
  letter-spacing: 10px;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 20%;
}

.nav-links li {
  list-style: none;
  padding: 25px 40px;
}

.nav-links a {
  color: black;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 15px;
}

nav li:hover {
  background-color: rgb(6, 168, 106);
}

nav li:hover a {
  color:#fff;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600&display=swap"
      rel="stylesheet"
    />

    <link rel="stylesheet" href="./css/style.css" />
    <title>Deux Citronella Trading</title>
  </head>
  <body>
    <nav>
      <div class="logo">
        <h4>LOGO</h4>
      </div>
      <ul class="nav-links">
        <li class="nav-link"><a href="#">Home</a></li>
        <li class="nav-link"><a href="#">About</a></li>
        <li class="nav-link"><a href="#">Contact</a></li>
        <li class="nav-link"><a href="#">Products</a></li>
      </ul>
    </nav>
  </body>
</html>

CodePudding user response：

Please try this

nav li:hover a {
    color: #fff;
}

CodePudding user response：

You should add the style for the children like this

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  font-family: "Poppins", sans-serif;
  background-color: white;
  overflow: hidden;
}

.logo {
  color: black;
  text-transform: uppercase;
  letter-spacing: 10px;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 20%;
}

.nav-links li {
  list-style: none;
  padding: 25px 40px;
}

.nav-links a {
  color: black;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 15px;
}

nav li:hover {
  color: white !important;
  background-color: rgb(6, 168, 106);
}

nav li:hover a{color:#fff}

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600&display=swap"
      rel="stylesheet"
    />

    <link rel="stylesheet" href="./css/style.css" />
    <title>Deux Citronella Trading</title>
  </head>
  <body>
    <nav>
      <div class="logo">
        <h4>LOGO</h4>
      </div>
      <ul class="nav-links">
        <li class="nav-link"><a href="#">Home</a></li>
        <li class="nav-link"><a href="#">About</a></li>
        <li class="nav-link"><a href="#">Contact</a></li>
        <li class="nav-link"><a href="#">Products</a></li>
      </ul>
    </nav>
  </body>
</html>

If you don't want to add a new line to css and ok with your code you could use color:inherit for <a> this will inherit the color from its parent element li

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  font-family: "Poppins", sans-serif;
  background-color: white;
  overflow: hidden;
}

.logo {
  color: black;
  text-transform: uppercase;
  letter-spacing: 10px;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 20%;
}

.nav-links li {
  list-style: none;
  padding: 25px 40px;
}

.nav-links a {
  color: inherit;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 15px;
}

nav li:hover {
  color: white !important;
  background-color: rgb(6, 168, 106);
}

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600&display=swap"
      rel="stylesheet"
    />

    <link rel="stylesheet" href="./css/style.css" />
    <title>Deux Citronella Trading</title>
  </head>
  <body>
    <nav>
      <div class="logo">
        <h4>LOGO</h4>
      </div>
      <ul class="nav-links">
        <li class="nav-link"><a href="#">Home</a></li>
        <li class="nav-link"><a href="#">About</a></li>
        <li class="nav-link"><a href="#">Contact</a></li>
        <li class="nav-link"><a href="#">Products</a></li>
      </ul>
    </nav>
  </body>
</html>

CodePudding user response：

You are pointing to wrong selector. Your is selector is a. So you should put your CSS like this.

nav li:hover nav { /*If you want to change background of whole navbar when hovering one item*/
    background-color: rgb(6, 168, 106);
}


nav li a:hover { /*This will change items text color when you hover*/
    color: white !important;
}

CodePudding user response：

Use below css for changing the color for hovering:

nav li:hover a {
    color: white
}

nav li:hover {
  background-color: rgb(6, 168, 106);
}