Printed from BasicTips.com, FREE helpful articles and tips for Webmasters and Business Owners
Copyright © 1994-2006 by BasicTips.com, a division of BasicTemplates.BIZ
All rights reserved. Republication in whole or in part in any form is not permitted.

Sponsored by BasicTemplates.BIZ
Website Templates with External CSS and Removable Graphics
http://www.BasicTemplates.biz

Co-Sponsored by Effective-Website-Secrets.com
Teaching webmasters effective web development and marketing techniques via free podcasts.
http://www.Effective-Website-Secrets.com

Category: CSS
Table Cell Background Colors Change on Mouseover with CSS
By BasicTemplates with External CSS

Are you ready to learn how to change the background color of a table cell (such as in a navigational bar) when the mouse passes over ("mouseover" in geek-speak)?

In this article we also provide you a table cell code snippet to use on your web page and within your "external" style sheet. If you are not familiar with the different methods of CSS and how or when to use them, be sure to read our article, "External, Internal or Inline? Which Method is Best?"

Click on the "View Live Example" icon above. If you mouseover the table cells on the example page will see that the background color changes on mouseover. When your mouse moves away from the table cell ("mouseout" in geek-speak) the color changes back to the original "onload" table cell color.

Here is the CSS class that you should add to your "external" style sheet that controls the "onload" table cell color, border width and color. You can name this custom class anything you like provided you assign the td HTML tag with the correct class name. We have named our custom CSS class "btnav".

.btnav { background-color: #84C1DF; border: 1px #000000 solid;}

Below is what the HTML source code looks like for one table cell. This would apply to all table cells within your table. We have added onmouseover/onmouseout tricks to the td tag. We also assigned our external CSS class to the td tag. Don't forget that step. We have specified the onmouseover color in hex code, and we specified the same color in hex code as the background-color in the "btnav" class we created in the "external" stylesheet for the onmouseout function.

<td class="btnav" onmouseover="style.backgroundColor='#84DFC1';"
onmouseout="style.backgroundColor='#84C1DF'">
<*div align="center"><*a href="http://www.basictemplates.com/" target="_blank">BasicTemplates.com<*/a><*/div>
</td>