Member Avatar for TomB1988

Hi there,

I currently have code in place to change the background colour of a cell in a table on mouseover, then change it back when the mouse is removed. What I would like to do is also change the foreground and font colour on mouseover, how do I go about doing this? My snippet of code is as follows:

<td onmouseover="this.style.backgroundColor='red';" 
                onmouseout="this.style.backgroundColor='#797B79';" class="style5">
                <a class="style2" href="http://www.google.com"><span class="style3">HOME</span></a></td>

Cheers for any help,

Tom.

  • 2 Contributors
  • 1 Reply
  • 74 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by Elbudster
Member Avatar for Elbudster

You don't really need to use JavaScript to achieve that effect. All you need to do are add a few CSS styles to do that. In fact, the JavaScript you have embedded in there is essentially doing that anyways. Here is a little example html file I made from your snippet. I removed some of the styles you had added for simplicity. Hope this helps.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>CSS Example</title>
<style type="text/css">
table td.my_class {
	background-color: #ff0;
}
table td.my_class a {
	color: #f00;
}

/* mouseover styles */
table td.my_class:hover {
	background-color: #f00;
}
table td.my_class:hover a {
	color: #ff0;
}
</style>
</head>
<body>

<table>
	<tr>
		<td class="my_class">
			<a href="http://www.google.com">HOME</a>
		</td>
	</tr>
</table>

</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.