When Hover over link color does not change HTML/CSS?

Question

I have css that sets a different color for for hover over a link. It does not appear to be working. Sometime links change color on hover and others do not. It also appears to be dependent on the Browser. It seems to work most of the time in Internet Explorer but it only works about a third of the time in Firefox. I can't seem to see what the problem is. Any ideas would be appreciated.

Here is my CSS

#content a:link {
text-decoration:none;
font-family: Georgia, serif;
font-style: normal;
font-weight: normal;
font-size: 1.0em;
line-height: 1.2em;
color: #00ccff;
}

#content a:hover {
text-decoration:underline;
font-family: Georgia, serif;
font-weight: normal;
font-size: 1.0em;
line-height: 1.2em;
color: #ffff00;
}

#content a:visited {
text-decoration:none;
font-family: Georgia, serif;
font-style: normal;
font-weight: normal;
font-size: 1.0em;
line-height: 1.2em;
color: #00ccff;
}

Answer 1

"em"s are the preferred font size anyway. "px" s no. The hover problem in IE is because IE has problems with the pseudo-class hover CSS rules. Links must be in order as you showed. Font comparisons:



http://paynelessdesigns.com/tools/tool_fontconversions.shtml



link - this is a link that has not been used, nor is a mouse pointer hovering over it

visited - this is a link that has been used before, but has no mouse on it

hover - this is a link currently has a mouse pointer hovering over it/on it

active - this is a link that is in the process of being clicked



Order matters. If "a:active" precedes "a:hover", the effects in "a:hover" will take precedence. So, in this example, you would not see the color change when the user clicks down on a link.



Ron

Answer 2

I'm not sure how universally supported that feature is, as you are finding. I would change the color with onmouseover and onmouseout responders.



http://www.w3schools.com/jsref/dom_obj_event.asp



Actually, the page I linked to uses your method for various elements.

BTW, can you give font size in "em"? I though one em was equivalent to the font size, making this a circular definition.

Answer 3

can no longer form hyperlinks that way. Jason's way with pseudo-training is faulty and not necessary on your case. superb to apply an exterior CSS record and hyperlink to it with the hyperlink tag: between the pinnacle tags of each and every web site: Embedded CSS could be ok in case you have some pages. Yours: a:hyperlink { textual content-ornament: none; colour: #0f0; } a:visited { textual content-ornament: none; colour: #00f; } a:hover { textual content-ornament: underline; colour: #XXXXXX; } a:visited { textual content-ornament: none; colour: #XXXXXX; } hyperlink types: you won't know it, yet a hyperlink has 4 distinct states that it is in. CSS enables you to customise each and each state. Please communicate over with right here key words that each and each correspond to a minimum of one particular state: hyperlink - it is a hyperlink that has no longer been used, neither is a mouse pointer soaring over it visited - it is a hyperlink that has been used in the past, yet has no mouse on it hover - it is a hyperlink at the instant has a mouse pointer soaring over it/on it lively - it is a hyperlink it is interior the technique of being clicked utilising CSS you additionally could make a distinct seek for everybody of those states: a:hyperlink { colour:#006; textual content-ornament:none; cursor:pointer; } a:visited { colour:#369; } a:hover { colour:#f60; textual content-ornament:underline; } a:concentration { define: none; /* do away with the dotted define extra via Firefox */ } a:lively { colour:#fc9; cursor:wait; } a:hyperlink {colour: #090;} a:visited {colour: #999;} a:hover {colour: #333;} a:concentration {colour: #333;} a:lively {colour: #090;} Order concerns. If "a:lively" precedes "a:hover", the effects in "a:hover" will take priority. So, in this occasion, you does no longer see the colour replace whilst the person clicks down on a hyperlink. Ron