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

Why doesn't my "hover" effect apply on my new portfolio?

Hey,

Currently rebuilding my new portfolio, and something has gone wrong with my navbar hover effects.

Take a look at: http://antonmoritz.me/

So if you're at the front page, nothing happens when hovering the links "Who", "Work" and "Talk". However, when proceeding to "Who", hovering the links activates the effect I created.

Any thoughts on why this happened?

Thanks a lot!

Best, Anton Moritz

3 Answers

The problem is on your css ligne 51 you put the background at none so you disable the hover ;)

No, that's unfortunately not the solution. That line has been there from the start. And it works on the "Who" page, but not the "Intro" page. The effect I desire has to do with the ::after, not the background. Any other thoughts? :-)

Hi Anton,

It looks like you do not have a :hover rule that matches on the homepage.

The hover rule that you do have which works on the "who" page matches when the ul has a "dark" class in it.

You're using the "light" class on your hp and it doesn't appear as if you've set up a selector to match that.

This was the hover selector that I found: ul.nav.dark a:hover:after

This doesn't match on the hp because of the "light" class.

I suppose you'll have to duplicate that selector and change "dark" to "light". Probably for :focus as well.

Cant actually see your css. But something like this would work .yourclass a:hover{

and the effect you want ;

}

Yeah, that's pretty obvious. If you take a look at the CSS, you will get an idea of what I'm talking about.