Treehouse: Grow your CSS skills. Land your dream job.

Help with hover

  • # February 8, 2010 at 1:55 pm

    ok, I am trying to make my nav link turn a different color when you hover over a button. My website is and i attached an image to show that it is a basic idea but I cant get anything to work. Hopefully someone can help.


    # February 8, 2010 at 8:47 pm

    I tried playing with it in firebug. you basically need to give the main menu buttons a different color when hovered over similar to the a:hover function.

    # February 8, 2010 at 9:09 pm

    You just need to add hover rules to a.section.

    a.section:hover {

    # February 8, 2010 at 11:13 pm

    Thats what I thought I needed to do but it never works is there anyway you can give me some code that I can tweak? Also, I need to make the center content box wider by 50 to 100 pixels how would I do that? Thanks for the help.

    # February 9, 2010 at 1:16 am

    The color isn’t changing because you have !important’s slammed all over the place. You need to get rid of those and start editing your plethora of CSS files.

    # February 9, 2010 at 12:14 pm

    The !importants should not matter ass long as they are within a bracket though… Or is this wrong? That is just how I learned at school so I dont really know what they do. Regardless more help would be great

    # February 10, 2010 at 11:05 pm

    !importants shouldn’t be used if they’re not needed. They can cause unwanted results if you have multiple ones. You need to go back and take them out if they are not needed. And if they are, you should look for another way to type the CSS so they aren’t. If you do that a simple:

    a:hover {

    should work.

    # February 10, 2010 at 11:23 pm

    Ok, I tried to put in the hover commands again tonight for about an hour and no matter how I typed it I couldnt get it to work on the nav bar but it works fine on the right side where you sign in. I am at a loss for words on how frustrating this is. I took out every !important that did not do anything leaving only 2 or 3 that for some reason would only respond if they were there. So where does this leave me now?

    # February 10, 2010 at 11:30 pm

    Ok, for some reason the code had to be

    a.section:hover {background:white !important;}

    I figured it out in firebug, but still not sure why it does not work without the !important being there.

    # February 11, 2010 at 4:56 pm

    It’s because all your other !important’s were overriding your a.section:hover CSS. That is why use should use as little of them as possible. Things can go haywire if you have multiple ones, especially a bunch on one menu. Only use if necessary, not for convenience.

    # February 11, 2010 at 6:27 pm

    !important means "use this one, even if another one comes along later that would overwrite it."

    In this case, you told it to be a certain color and that it was !important. When your hover style came along and tried to change the color, it wasn’t allowed to. When you told it to also be !important, then they fought over it – but its hard to tell for sure which one will win.

    The best method would be to take out the !important from the base state.

    # February 11, 2010 at 9:14 pm

    Ok, thanks this has been a big help.

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.