技术问询：导航栏（Navigation bar）hover颜色无法正常变更

Hey there! Let's work through why your navbar links aren't updating color on hover. Based on the HTML snippet you shared, here are the most common fixes and checks:

1. You're Missing the Hover CSS Rule (Most Likely Culprit) #

The simplest reason is that you haven't defined the :hover state for your nav links. Bootstrap has default navbar styles, but you need to override them with your own custom CSS.

Add this to your stylesheet:

/* Target your nav links on hover */
.nav.navbar-nav li a.smoth-scroll:hover {
    color: #ff4500; /* Replace with your preferred hover color */
    /* Optional: Add polish with transitions or background */
    background-color: rgba(255, 69, 0, 0.1);
    transition: all 0.3s ease;
}

Why this selector? Bootstrap's default navbar styles use a specific selector, so matching that specificity ensures your custom styles take precedence.

2. Your CSS Selector Isn't Specific Enough #

If you already have hover styles but they're not working, another CSS rule is probably overriding them. Use your browser's DevTools (hit F12) to inspect the link while hovering. Look in the Styles tab—if your hover color is crossed out, a more specific rule is winning.

Fix this by making your selector more specific. For example, if your navbar is inside a div with an ID like main-nav, use:

#main-nav .nav.navbar-nav li a.smoth-scroll:hover {
    color: #your-color-here;
}

3. Typo in the Class Name #

I noticed your link class is smoth-scroll (missing an 'o' in 'smooth'). If your CSS uses smooth-scroll (the correct spelling), that's why the styles aren't applying. Double-check that the class name in your HTML matches exactly what's in your CSS.

4. Inline Styles Are Blocking Your CSS #

If your <a> tags have inline style attributes (like <a style="color: #000;">Home</a>), those will override any CSS hover styles. Remove those inline styles if possible, or use !important as a last resort (though it's better to fix specificity instead):

.nav.navbar-nav li a.smoth-scroll:hover {
    color: #ff4500 !important;
}

5. Bootstrap's Default Hover Styles Are Interfering #

Bootstrap's default navbar adds a light gray background to links on hover. To remove that and set your desired color, use this full snippet:

/* Default link style */
.nav.navbar-nav li a.smoth-scroll {
    color: #333;
}

/* Hover style with no background */
.nav.navbar-nav li a.smoth-scroll:hover {
    color: #2c3e50;
    background-color: transparent; /* Overrides Bootstrap's default hover background */
}

Quick Test to Verify #

Right-click a nav link, select "Inspect", then in DevTools click the :hov button to force the hover state. Manually add the color property—if it works, your selector just wasn't specific enough.

内容的提问来源于stack exchange，提问作者brocklee12