Help with hover

[ArchDesignLabs]

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

Thanks

[dcp3450]

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.

[TheDoc]

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

a.section:hover {
}

[ArchDesignLabs]

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.

[TheDoc]

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.

[ArchDesignLabs]

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

[noahgelman]

!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 {
color:#—
}

should work.

[ArchDesignLabs]

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?

[ArchDesignLabs]

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.

[noahgelman]

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.

[luxurychair]

!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.

[ArchDesignLabs]

Ok, thanks this has been a big help.

[Author]

Posts