0

I want to change the links color in the navbar when the mouse hovers at each one of them.

This is my code :

<header>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="index.html"></a>
            </div>

            <ul class="nav navbar-nav">
                <li><a href="index.html">Home</a></li>
                <li><a href="#">Product</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Contact us</a></li>
                <li class="your_account"><a href="#">Your Account</a></li>

            </ul>

            <!-- Search form -->
            <form class="form-inline d-flex justify-content-center md-form form-sm">
                <input class="form-control form-control-sm mr-3 w-75" type="text" placeholder="Inspire yourself" aria-label="Search">
                <i class="fas fa-search"></i>
            </form>
        </div>

    </nav>
</header>

I tried to change it with this code, but didn't work!

nav ul li:hover {
    color: red;
}

Any suggestions?

Or Assayag
  • 5,662
  • 13
  • 57
  • 93
OmarShuaili
  • 40
  • 8
  • your code will just change the color of the li element you are hovering, not the entire navbar – Lelio Faieta Nov 27 '20 at 15:45
  • You may use `.navbar-default .navbar-nav > li > a { color: red; }`. The `>` is used to have no color changes in dropdown menus if you are using these in the future. – bron Nov 27 '20 at 15:55

3 Answers3

0

You need to give the hover effect on the anchor tags and not on the <li>

nav ul li a:hover {
  color: red;
}


nav ul li a:hover {
  color: red;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>JS Bin</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <!-- Required meta tags -->
        <meta charset="utf-8" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />

        <!-- Bootstrap CSS -->
        <link
          rel="stylesheet"
          href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
          crossorigin="anonymous"
        />

        <title>Hello, world!</title>
      </head>
      <body>
        <header>
          <nav class="navbar navbar-default">
            <div class="container-fluid">
              <div class="navbar-header">
                <a class="navbar-brand" href="index.html"></a>
              </div>

              <ul class="nav navbar-nav">
                <li><a href="index.html">Home</a></li>
                <li><a href="#">Product</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Contact us</a></li>
                <li class="your_account"><a href="#">Your Account</a></li>
              </ul>

              <!-- Search form -->
              <form
                class="form-inline d-flex justify-content-center md-form form-sm"
              >
                <input
                  class="form-control form-control-sm mr-3 w-75"
                  type="text"
                  placeholder="Inspire yourself"
                  aria-label="Search"
                />
                <i class="fas fa-search"></i>
              </form>
            </div>
          </nav>
        </header>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script
          src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
          integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
          crossorigin="anonymous"
        ></script>
        <script
          src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
          integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
          crossorigin="anonymous"
        ></script>
        <script
          src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
          integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
          crossorigin="anonymous"
        ></script>
      </body>
    </html>
  </body>
</html>
Imran Rafiq Rather
  • 7,677
  • 1
  • 16
  • 35
0

The colors of the links are overridden by the a tags' default styles, so you should apply it to the a tag, not the li tag:

nav ul li:hover a {
    color: red;
}
<nav class="navbar navbar-default">
    <ul class="nav navbar-nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="#">Product</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Contact us</a></li>
        <li class="your_account"><a href="#">Your Account</a></li>
    </ul>
</nav>
technophyle
  • 7,972
  • 6
  • 29
  • 50
  • Didn't work either, when I hover at an `a` tag the color change to light gray not red – OmarShuaili Nov 27 '20 at 15:56
  • That's probably because you already have that style defined somewhere. Try `color: red !important;`. – technophyle Nov 27 '20 at 15:57
  • its working now, I think it was trying to overwrite bootstrap style. Thanks – OmarShuaili Nov 27 '20 at 16:00
  • You're welcome. Please be careful of overriding bootstrap styles or using `!important` styles though. It's better to make your selector more specific so that the style overrides gracefully instead of using `!important`. – technophyle Nov 27 '20 at 16:01
  • So what's the proper way to do it? – OmarShuaili Nov 27 '20 at 16:06
  • Inspect the a element on your browser and see what's the selector of the overridden style from Bootstrap, and re-define your custom selector more specifically. For example, `nav.navbar ul.nav > li:hover a`. – technophyle Nov 27 '20 at 16:08
0
nav ul li a:hover {
    color: red;
}

or

.navbar-nav a:hover{
  color: red;
}
Shahryar Mohajer
  • 581
  • 3
  • 11