CODEWITHSUNDEEP
htmlcss
DearRicky
DearRicky

Reputation: 402

Hover Link Colour, CSS

Right now, I've implemented legal notices at the bottom of my page and I've managed to make all the links white. However, I want only the hover colour to be different, like this website: http://www.condolicious.com/

Can someone please tell me how to do this? I tried changing the a:hover color thing and I'm only getting solid colours. Thanks.

#footer .notice a {
    a:link; color: #fff;
    a:visited; color: #fff;
    a:hover; color: #fff;
    a:active; color: #fff;
    text-decoration: none;
}

Upvotes: 1

Views: 2344

Answers (7)

rolling stone
rolling stone

Reputation: 13016

You've got to declare each link hover state separately, like this:

/* you can combine css declarations as follows */
#footer .notice a {
    color: #fff;
    text-decoration: none;
}

#footer .notice a:visited {
    color: #fff; /* change this to whatever color you'd like */
}

#footer .notice a:hover {
    color: #000; /* change this to whatever color you'd like */
    text-decoration: underline;
}

#footer .notice a:active {
    color: #fff; /* change this to whatever color you'd like */
}

Upvotes: 1

g_thom
g_thom

Reputation: 2810

The syntax above isn't going to work:

#footer .notice a {
    color: #000;
    text-decoration: none;
}
#footer .notice a:hover {
    color: #FFF;
}

The first CSS declaration will set the colour of all your a tags (you don't need to set them individually unless they're styled differently). The second sets the colour on hover, a pseudoclass that is supported by all modern browsers (and most older ones).

You don't need to set the text-decoration again in the second declaration, as the :hover already inherits all the "generic" attributes set in the first declaration.

Upvotes: 1

Ben Hull
Ben Hull

Reputation: 7673

Your :hover styles need to be separate CSS declarations - not part of the #footer .notice a {} block, like so:

#footer .notice a {
    color: #fff;
    text-decoration: none;
}

#footer .notice a:hover,
#footer .notice a:active {
    color:#CC0000;/*Whatever color you like */
}

Upvotes: 3

MikeM
MikeM

Reputation: 27405

you'll need to adjust your syntax

#footer .notice a:hover {
    color:green;
    text-decoration: none;
}

Upvotes: 1

Tarun
Tarun

Reputation: 5514

Change your code to: 

   #footer .notice a {
    color: #fff;
    text-decoration: none;
    }

    #footer .notice a:hover {
    color:#AAA
    }

here, #AAA is color when anchor tag is hovered.

edit: removed the invalid css

Upvotes: 0

lbrandao
lbrandao

Reputation: 4373

Did you realize all your links have the same color? Even the hover state?

#footer .notice a:hover { color: red; }

Upvotes: 1

Jason Gennaro
Jason Gennaro

Reputation: 34855

You need to do this

#footer .notice a { 
    color: #fff;
    text-decoration: none;
}

#footer .notice a:hover { 
    color: #fff;  // change to a different color
}

Same with :visited and :active.

Upvotes: 1

Related Questions