Table Cell Background Colors Change on Mouseover with 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>