Changing onmouseover font color

AshleyQuick · 02-25-2005, 06:49 PM

You have to mouseover the actual link in order for the link color to change to white. Is there a way to modify this so that you can mouseover any part of the table cell to turn the link color to white?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
	<style>
	
	a {
	color: #758EA4;
	}
	
	a.nav {
		color: #758EA4;
		text-decoration: none;
	}
	
	a.nav:visited {
		color: #758EA4;
		text-decoration: none;
	}
	
	a.nav:hover {
		color: #FFF;
		text-decoration: none;
	}
	
	a.nav:active {
		color: #FFF;
		text-decoration: none;
	}
	
	body,html {
		background-color: #FFFFFF;
		color: #333333;
	}
	
	td {
		background-color: #FFFFFF;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
		margin: 0px;
		padding: 0px;
	}
	
	td.nav_cell {
		padding: 4px;
		text-align: right;
		width: 100%;
	}
	
	</style>
</head>

<body>

<table style="width: 203px">
	<tr>
		<td class="nav_cell" onmouseover="style.backgroundColor='#768EA5'; this.style.color='#FFF'; this.style.cursor='pointer'; window.status = 'Corporate Information Vehicles'; return true;" onmouseout="style.backgroundColor='#FFF'; window.status = ''; return true;" onClick="window.location.href='/'"><a class="nav" href="/">Corporate Information&nbsp;&nbsp;<img align="absmiddle" src="gfx/nav_marker_out.gif" alt="" width="2" height="16" border="0"><img align="absmiddle" src="gfx/nav_marker_over.gif" alt="" width="2" height="16" border="0"></a></td>
	</tr>
</table>

</body>
</html>

whizard · 02-25-2005, 07:12 PM

td:hover

except in IE, where you need to include a special browser behavior for it to work. for more info on that, go to this thread:
http://codingforums.com/showthread.php?t=52164

Dan

AshleyQuick · 02-25-2005, 07:26 PM

Uhhh, I took a look at that thread and couldn't really understand it. Is there any other methodologies I could try?

whizard · 02-25-2005, 07:36 PM

Let me try to explaing this to you.

All browsers support the :hover pseudoclass on any object, except IE. IE only accepts it on the <a> tag. But, this file is a sort of patch for IE that will make the :hover pseudoclass work on all elements. All you have to do is download it, and then link to it by adding this code in you <body> tag:

Code:

style="behavior:url(location of file relative to .html file);"

or in your stylesheet, like this:

Code:

body
{
style="behavior:url(location of file relative to .html file)";
}

Then any item can have a hover applied to it, and it will work in any browser.

HTH, Dan

AshleyQuick · 02-25-2005, 08:16 PM

This works with text that isn't within <a></a> tags. If you look at my code, I don't see how your solution will work. What am I missing?

Ash

rmedek · 02-25-2005, 10:12 PM

Do you mean that you want only the links to have the color change? And that the whole cell should change color rather than the just the link text?

If so, add "display: block; width: 100%" to your link CSS. This will expand the width of the link to take up the space within the table cell.