mouseover font color

[Chadi]

How do I add font color change on mouse over on a cell while I already have default mouse over font color change page wide?

		<tr>
			<td style="background-color:#F8F8F8;text-align:center; padding-left:10px" onmouseover="this.style.backgroundColor='#FF9900';this.style.borderColor='#FFFFFF';" onmouseout="this.style.backgroundColor='#F8F8F8';this.style.borderColor='#ffffff';" height="20">
			<p style="text-align: left"><font face="Arial" style="font-size: 8pt; font-weight: 700" color="#FF9900">» </font>
			<font face="Arial" style="font-size: 8pt; font-weight: 700">
			<a style="text-decoration: none" href="network.htm">Data Center &amp; 
			Network</a></font></td>
		</tr>

The page style is:

<style type="text/css">
a:link {
color:#2E304E;
}
a:visited {
color:#2E304E;
}
a:hover {
color:#FF9900;
}
</style>

[jscheuer1]

td a:hover {
color:whatever;
}

[mwinter]

How do I add font color change on mouse over on a cell while I already have default mouse over font color change page wide?

John answered that, but I think your markup should be commented on.

<td style="background-color:#F8F8F8;text-align:center; padding-left:10px"

Avoid in-line style declarations whenever possible. Presentation should be separated from content: use an external style sheet.

onmouseover="this.style.backgroundColor='#FF9900';this.style.borderColor='#FFFFFF';" onmouseout="this.style.backgroundColor='#F8F8F8';this.style.borderColor='#ffffff';"

Consider using functions to perform these actions, and perhaps using a change in class attribute to effect them. Both changes leave the markup a little clearer, and allow easier maintanence in the future.

<font face="Arial" style="font-size: 8pt; font-weight: 700" color="#FF9900">» </font>

Don't ever use the font element. Ever! Moreover, don't use points (pt) or pixels (px) to set text size. Use percentages, leaving body text at 100%.

If necessary, you could mark-up the above using a span element:

<span class="bullet">»</span> <a href="...">...</a>

however, if my guess is correct and this is part of a list, then the table should be replaced by an unordered list (ul element).

a:link {
color:#2E304E;
}

A color declaration should be accompanied by an explicit background declaration.

Mike

[Chadi]

Thanks, using the original code I provided how would I also make the entire cell hyperlinked as the text within it, on mouseover?

[jscheuer1]

td a:link {
display:block;
width:100%;
height:100%;
}

I didn't double check but, as long as the link is the only thing in the table cell, that will do it.

[Chadi]

Sorry but how would I implement this exactly?

This is one cell for example

<td style="background-color:#F8F8F8;text-align:center; padding-left:10px" onmouseover="this.style.backgroundColor='#EAEAEA';this.style.borderColor='#FFFFFF';" onmouseout="this.style.backgroundColor='#F8F8F8';this.style.borderColor='#ffffff';" height="20">
			<p style="text-align: left">
			<font face="Arial" style="font-size: 8pt; font-weight: 700" color="#FF9900">
			<img border="0" src="images/menuorange.gif"> </font><span style="font-weight: 700"><a href="http://webdomain.com/colocation.htm"><font face="Arial" style="font-size: 8pt; text-decoration: none">
			Colocation</font></a></span></td>

[jscheuer1]

That really is, as Mike pointed out, a mess (see his comments for cleaning it up). However, it really doesn't present any roadblock I can see to using this in the head of your page:

<style type="text/css">
td a:link {
display:block;
width:100%;
height:100%;
}
td a:hover {
color:yellow;
background-color:black;
}
</style>