Example: CSS Mouse creation changes the background attributes of a table

Source: Internet
Author: User

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.
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.