Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Collin Retkowski
Collin Retkowski
6,542 Points

Bootstrap a:hover question

I am trying to make a navigation bar with Bootstrap on a project i'm working on. I am trying to make the "a links" white and then when hovered on to turn grey. When i go to the class for the "a link" and type "text-white" it turns white but then the color doesn't change when hovering over it. I tried using CSS and targeting "a:hover" but i couldn't figure it out. Help much appreciated!

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

It sounds like you have the right idea. You might need to show (or link to) the actual code for us to spot the cause of the issue.

Collin Retkowski
Collin Retkowski
6,542 Points

<header> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">Collin Michael</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link text-white" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link text-white" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link text-white" href="#">Blog</a> </li> <li class="nav-item"> <a class="nav-link text-white" href="#">Contact</a> </li> </ul> </div> </nav> </header>

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

When posting code (both HTML and CSS), use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area. :arrow_heading_down:   Or watch this video on code formatting.

And remember to show the CSS part of the code also.

2 Answers

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

One thing comes to mind without seeing the code — it's important that the "a:hover" rule comes after the other CSS rule for the link.

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,863 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,863 Points

Hi Collin,

Without seeing the whole code, it's tough to troubleshoot. The a:hover should work to turn grey, and the a:link should be for white. It may be a browser setting (are you using normalize.css... you should). Or, there may be a cascading issue that is overwriting the rule.

When you load the webpage, the best way to troubleshoot something like that would be with the Chrome Dev Tools.

I hope you get it sorted. :) :dizzy: