Articles Tutorials Work at Home Entrepreneurs, Webmasters, Small Business Owners
Articles Tutorials Work at Home Entrepreneurs, Webmasters, Small Business Owners
Articles & Tutorials for Work at Home Entrepreneurs
Webmasters and Small Business Owners
Get More >

Newest Articles 
Search Engine Marketing
Internet Marketing
Affiliate Marketing
Email Marketing
Viral Marketing
Webmaster Resources
Business Resources
Make More Money
CSS
Web Design
Graphic Design
Color Theory
Product Reviews
Time Management
Business Ethics
Promotional Strategies
Glossary of Terms
Direct Mail Marketing
Telemarketing
Product Sourcing



Link to Us!

CSS
Email this article  :  Printer friendly page

Table Cell Background Colors Change on Mouseover with CSS


Click Here to View Live Example
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>

Copyright © 1994-2006 by BasicTips.com, a division of BasicTemplates.com, CSS HTML Web Site Templates with Exernal CSS and Removable Graphics. If you found our articles helpful, subscribe to our newsletter and get articles like this delivered to your inbox - FREE.

Order soon and get up to 5 FREE domains & more!
Host 6 Domains on 1 Account
5000MB and 400GB for $6.95 a month!

 

Page copy protected against web site content infringement by Copyscape
All articles are originally authored by BasicTemplates.com. Reprints in whole or in part are not permitted. See Copyright Notice

Copyright © 1994-2006 BasicTips.com, a division of BasicTemplates.com, Web Site Templates with External CSS
The Internet's #1 Choice for HTML CSS Web Templates via a Membership. Designed using External CSS and Removable, Swap-Out Graphics.
Basic Web Templates | Website Templates | HTML CSS Templates | Web Design Templates | Web Site Templates