Hovering Issue in CSS

Question

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.

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

    
    
    

  
  
  


  
    
      Amodh Dhakal
      
      
        
          
            Home
          
          
            Project
          
          
            Contact

user_10719637 · Answer

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

user_18001301 · Answer

blue and dark-blue are the same color; try changing one of them:

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

user_16001580 · Answer

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

To

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

Hovering Issue in CSS

3 Answers