CODEWITHSUNDEEP
htmlcss
abelenky
abelenky

Reputation: 64682

Changing a link-style, only for a certain class

I want to change the link-style for some of my links, like this:

a:hover
{
    /* These links will be blue when hovered-over */
    background-color: #3366FF;
}

However, I only want this to take effect in my Navigation Bar, and not for regular links.

I have tried variations on this:

#navbar a:hover
{
    /* These links will be blue when hovered-over */
    background-color: #3366FF;
}

With the intended meaning "this only applies to links with <div id="navbar">"
But it didn't work.

How can I set the style for only certain links, defined by the class or id of their container?

Upvotes: 15

Views: 46898

Answers (3)

Paul
Paul

Reputation: 1047

That looks ok to me, Robusto has a valid point with the colour used.

Another method is giving the links a class of their own, eg:

CSS

a.navlink:visited 
a.navlink:hover
{
    background-color: #3366FF; 
}

HTML

<a href="index.html" class="navlink">Home</a>

Upvotes: 17

Robusto
Robusto

Reputation: 31883

I think you may want to use the "color" property here instead of "background-color".

If by chance you really do want to change the background-color, remember that links display inline and don't have a large, comfortable rectangle around them, so depending on the container's background color it might not be noticeable. (This is probably not the case, but I threw that in in case your links are very small.)

Finally, since blue is close to the default link color, consider testing with an exotic color (like red) to see if the problem is in your CSS or your color selection.

Upvotes: 0

gmunkhbaatarmn
gmunkhbaatarmn

Reputation: 1461

Maybe your tested links are visited links. I prefer:

#navbar a:hover,
#navbar a:visited
{
    background-color: #3366FF;
}

Upvotes: 15

Related Questions