Changing menu background color when rolling over with cursor
Author: Maksimova O.
Type: HTML and CSS
Tutorials
Level: All levels
Added: 25-02-2009
Rating:
Changing menu background color when rolling over with cursor
Let us learn how to make items in table menu change their background color when rolling over with cursor as it is shown on the image below.
1. At first you need a menu. Create it and define the color gamma. After that choose default and end color Let's say that would be #CCCCCC and #999999.
2. Then place the following code into the head of you document between <HEAD> and </HEAD> tags:
<style type="text/css">
td.off {background: #CCCCCC;}
td.on {background: #999999;}
</style>
As you see:
td.off is the initial background color - #CCCCCC — light grey.
td.on is the end color - #999999 — dark grey.
3. To apply the CSS to the table created you need to insert the code given below into each of <td> tags inside your table. class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"
The code should be as follows:
<td class="off" onmouseover="this.className='on'" onmouseout="this.className='off'">MENU 1</td>
Here is the explanation.
1: <td class="off" - Assigns the off class of your CSS to the table item. That means that default color of this table item will be #CCCCCC
2: onmouseover="this.className='on'" - Assigns the on class of your CSS to the table item, when rolling over it with the cursor
3: onmouseout="this.className='off'"> - Assigns the off class of your CSS to the table item back, when the cursor is away.
4. The full code will look like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Table Background Change</title>
<style type="text/css">
td.off {background: #CCCCCC;}
td.on {background: #999999;}
</style>
</head>
<body>
<table width="150" cellpadding="3">
<tr>
<td class="off" onmouseover="this.className='on'" onmouseout="this.className='off'">
<font color="#000000" size="1" face="Verdana, Arial, Helvetica, sans-serif">Menu 1 </font></td>
</tr>
<tr>
<td class="off" onmouseover="this.className='on'" onmouseout="this.className='off'">
<font color="#000000" size="1" face="Verdana, Arial, Helvetica, sans-serif">Menu 2 </font></td>
</tr>
<tr> <td class="off" onmouseover="this.className='on'" onmouseout="this.className='off'">
<font color="#000000" size="1" face="Verdana, Arial, Helvetica, sans-serif">Menu 3</font></td>
</tr>
<tr> <td class="off" onmouseover="this.className='on'" onmouseout="this.className='off'">
<font color="#000000" size="1" face="Verdana, Arial, Helvetica, sans-serif">Menu 4 </font></td>
</tr>
</table>
</body>
</html>
Enjoy the result!
