This tutorial teaches you how to change the background color of a table when you move the cursor over a table (cell.
First, create a menu on your page. Then, create two colors for identification: The first is the initial color of the table, the other is the background color generated when you move the cursor over the table. In my case, the default background effect color (when the mouse is over) is: #999999, and the initial color is: # CCCCCC.
Now, copy the following code to the document header. (Between <HEAD> </HEAD> labels)
| The code is as follows: | Copy code |
| <Style type = "text/css"> Td. off { Background: # CCCCCC; } Td. on { Background: #999999; } </Style> |
|
Change the blue color as needed.
Td. off indicates the initial color of the table. The initial value is # CCCCCC.
Td. on refers to the color displayed when you move the mouse over the table. Here, the value is set to dark gray (# CCCCCC ).
Now, we need to apply this CSS code to the created table. Insert the following code into each <td> tag in the table. Class = "off" onmouseover = "this. className = 'on'" onmouseout = "this. className = 'off '"
The added code is as follows:
<Td class = "off" onmouseover = "this. className = 'on'" onmouseout = "this. className = 'off'"> MENU 1 </td>
Let's understand the following code line by line:
<Td class = "off" -- assign a value to the off class of CSS corresponding to each column cell in the table. It means that the initial color of each column cell in the table is: # CCCCCC.
| The code is as follows: | Copy code |
| Onmouseover = "this. className = 'on'" -- the effect of CSS when you move the cursor over each cell column in the table. Onmouseout = "this. className = 'off'"> -- the CSS effect corresponding to each column of cells in the table. |
|
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
