Setting Hover & Link Colours

@chestertbSep 28.2008

This on’e got me stumped…

I’m trying to set hover & link colours for 3 different page elements.

The first is the default. Links in the default should be whatever colour the default text is set to.

For that, I use this…
a:link { text-decoration: none; background-color: transparent;}
a:visited {text-decoration: none; background-color: transparent;}
a:hover {text-decoration: none; color: #E0218A; background-color: transparent;}
a:active {text-decoration: none; color: #E0218A; background-color: transparent; }
h1 {font-family:sans-serif; font-size:24pt; font-weight:bold; font-style:normal; text-decoration:none; text-align: left; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 6px; line-height:110%; color:#000000;}

In the example, <h1> is set with a color:#000000. It should display as #000000, except when the cursor hovers, when it should change to color:#E0218A. Instead, it displays as the browser default link color:#0000FF. (The hover displays correectly.)

Then I have an element called “bar”. It’s colour and hover properties are set like this…

a.bar:link {font-family:sans-serif; font-style:normal; text-decoration:none; font-weight:bold; color:#ffffff; background-color:transparent;}
a.bar:visited {font-family:sans-serif; font-style:normal; text-decoration:none; font-weight:bold; color:#ffffff; background-color:transparent;}
a.bar:hover {font-family:sans-serif; font-style:normal; text-decoration:none; font-weight:bold; color:#ffcc33; background-color:transparent;}
a.bar:active {font-family:sans-serif; font-style:normal; text-decoration:none; font-weight:bold; color:#ffffff; background-color:transparent;}
*.bar {font-family: ‘Century Gothic’, ‘Trebuchet MS’; font-size: 8pt; margin-top:0px; color: white;}

It works exactly as per spec.

Finally, I have an element called “mitm”, which I set as follows;
a.mitm:link {font-style:normal; text-decoration:none; font-weight:normal; color:#ff9900; background-color:transparent;}
a.mitm:visited {font-style:normal; text-decoration:none; font-weight:normal; color:#ff9900; background-color:transparent;}
a.mitm:hover {font-style:normal; text-decoration:none; font-weight:normal; color:#ff9900; background-color:transparent;}
a.mitm:active {font-style:normal; text-decoration:none; font-weight:normal; color:#ff9900; background-color:transparent;}
*.mitm {font-family:’Century Gothic’, ‘Avant Garde’, sans serif; font-size:10pt; font-weight:normal; text-decoration:none; text-align: left; margin-left: 12px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; color:#ff9900;}

It doesn’t work at all. I get both the browser default link and hover colours.

Note that the browser defaults show in both IE and Firefox.

Anyone got any thoughts?

to post a comment

CSS

7 Comments(s) _↴

@FangSep 28.2008 — #They all work as expected.

Use code shorthand:

a.bar:link, a.bar:visited, a.bar:active {font-family:sans-serif; font-style:normal; text-decoration:none; font-weight:bold; color:#ffffff; background-color:transparent;}
 a.bar:hover {color:#ffcc33;}
 *.bar {font-family: 'Century Gothic', 'Trebuchet MS'; font-size: 8pt; margin-top:0px; color: white;}

@chestertbauthorSep 28.2008 — #Thanks Fang.

The 'shorthand' is a great tip. Much appreciated. As for the "work as expected" bit, I think the problem might be in my html, and in the order that elements are used it.

As always, your help is much appreciated.

@chestertbauthorSep 28.2008 — #Except...

That still doesn't explain why this...

<h1><a href="whatever">The Text</a></h1>

Displays as the browser default #0000FF instead of the h1 color #CC3366

I know this is a really dumb question (I'm famour for those!), but should the html be

<a href="whatever"><h1>The Text</h1></a>

?

@FangSep 28.2008 — #<h1> is a block element, <a> an inline element.

Never wrap a block element in an inline element.

This is correct:<h1><a href="whatever">The Text</a></h1>
If you want "The Text" to display the h1 color #CC3366 then change the css:[COLOR="Blue"]h1 a [/COLOR]{font-family:sans-serif; font-...

@chestertbauthorSep 28.2008 — #Thanks Fang.

Much appreciated.

@chestertbauthorSep 30.2008 — #The blocks that don't seem to work are the html blocks, h1, h2, p etc.

The CSS looks like this...

a.h1:link {color:#99cc99; font-style:normal; text-decoration:none; font-weight:normal; background-color:transparent;}

a.h1:visited {color:#99cc99; font-style:normal; text-decoration:none; font-weight:normal; background-color:transparent;}

a.h1:hover {color:#3399ff; font-style:normal; text-decoration:none; font-weight:bold; background-color:transparent;}

a.h1:active {color:#99cc99; font-style:normal; text-decoration:none; font-weight:normal; background-color:transparent;}

h1 {font-family:Impact, Charcoal, sans-serif; font-size:24pt; font-weight:normal; font-style:normal; text-decoration:none; text-align:left; margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:6px; color:#99cc99;}

[Should the h1 be declared before the a.h1?]

An <h1> element displays as per the h1 css, but this reverts to the default browser colours...

<h1><a class='h1' href='whatever'>Whatever</a></h1>

However, if you substitute 'mitm' for 'h1', it works as intended.

Any more thoughts?

PS... link, visited, hover and active are on separate lines because, while they're the same in the current version, in future versions, they can be different.

@chestertbauthorOct 01.2008 — #Doh!

I think I need to change the css as follows...

h1 a:link {color:#99cc99; font-style:normal; text-decoration:none; font-weight:normal; background-color:transparent;}

h1 a:visited {color:#99cc99; font-style:normal; text-decoration:none; font-weight:normal; background-color:transparent;}

h1 a:hover {color:#3399ff; font-style:normal; text-decoration:none; font-weight:normal; background-color:transparent;}

h1 a:active {color:#99cc99; font-style:normal; text-decoration:none; font-weight:normal; background-color:transparent;}

h1 {font-family:Impact, Charcoal, sans-serif; font-size:24pt; font-weight:normal; font-style:normal; text-decoration:none; text-align:left; margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:6px; color:#99cc99;}

I'll check it when I get back to my office later today.

CTB

Also in #CSS _↴

Floating and clearing five section tags CSS and Kerning Position/layout

Success!

Help @chestertb spread the word by sharing this article on Twitter...

Tweet This

Setting Hover & Link Colours

7 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Setting Hover & Link Colours

7 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #CSS _↴