Hovering Issue in CSS-CodePudding

I am trying to make the nav-link have the color of blue, with the hover effect having the color of dark-blue. I got the color right but when I try to use hover, it doesn't work. Does anyone what the issue is? Also, does anyone know how to override bootstrap styles with my custom styles without making a mess. Thank You!

I have included the the necessary code down below, and thank you again for helping me solve this difficult issue of mine.

css

:root {
    --white: #F9F7F7;
    --light-blue: #DBE2EF;
    --blue: #3F72AF;
    --dark-blue: #3F72AF;
}

* {
  margin: 0;
  padding: 0;
  font-family: "Outfit", sans-serif;
  color: var(--blue);
}

body {
    background: var(--white);
}

/* Navbar */
nav {
    background: var(--light-blue);
}

#brand, #link {
    color: var(--blue);
}

.nav-link.hover {
    color: var(--dark-blue) !important;
}

html

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p"
    crossorigin="anonymous"></script>

  <!-- Links -->
  <link rel="stylesheet" href="style.css" />
  <link rel="shortcut icon" href="logo.png" type="image/x-icon" />

<!-- Navbar -->
  <nav >
    <div >
      <a  id='brand' href="#">Amodh Dhakal</a>
      <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span ></span>
      </button>
      <div  id="navbarSupportedContent">
        <ul >
          <li >
            <a  aria-current="page" href="#" id='link'>Home</a>
          </li>
          <li >
            <a  aria-current="page" href="#" id='link'>Project</a>
          </li>
          <li >
            <a  aria-current="page" href="#" id='link'>Contact</a>
          </li>
      </div>
    </div>

CodePudding user response：

It looks like it's two things. The blue and dark blue have the same hex values, so you'll want to change those to whichever values you'd like:

:root {
    --white: #F9F7F7;
    --light-blue: #DBE2EF;
    --blue: blue;
    --dark-blue: darkblue; 
}

And I noticed you used .hover instead of :hover, so you'll want to change your css hover effect to this:

.nav-link:hover {
    color: var(--dark-blue) !important;
}

CodePudding user response：

:root {
    --white: #F9F7F7;
    --light-blue: #DBE2EF;
    --blue: #3384e5;//<-- changed this
    --dark-blue: #3F72AF; 
}

CodePudding user response：

Change the color values in your root

:root {
    --white: #F9F7F7;
    --light-blue: #DBE2EF;
    --blue: #3F72AF; <- Same values
    --dark-blue: #3F72AF; <- Same values
}

And change

.nav-link.hover {
    color: var(--dark-blue) !important;
}

.nav-link:hover {
    color: var(--dark-blue) !important;
}