In Web applications, to make it easier for users to view tables, you can change the style of the rows of tables that are hovering over the mouse. Changing the background color will give users a good experience, especially when the tables are relatively wide, does not look at serial.
In order to implement this function, I used js to capture mouse events:
<Table>
<Tr onmouseover = "This. style. Background = '# c0c0c0'" onmouseout = "This. style. Background = '# ffff'">
<TD> 1 </TD> <TD> table content </TD>
</Tr>
<Tr onmouseover = "This. style. Background = '# c0c0c0'" onmouseout = "This. style. Background = '# ffff'">
<TD> 2 </TD> <TD> table content </TD>
</Tr>
</Table>
Today, when I checked the examples attached to Dave Crane's "Ajax in action", I found a CSS selector like span: hover. I always thought that hover was applied to the link tag, I didn't expect it to work like this. If this is the case for an association, can the table row be hovering over? After the test, the answer is yes. Both IE and Firefox support this usage.
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Head>
<Title> New table row hover method </title>
<Style type = "text/CSS">
TR: hover {Background: # ffcc00; cursor: hand ;}
</Style>
</Head>
<Body>
<Table>
<Tr>
<TD> 1 </TD> <TD> table content </TD>
</Tr>
<Tr>
<TD> 2 </TD> <TD> table content </TD>
</Tr>
</Table>
</Body>
</Html>
This method can makeCodeConcise. Not only tr tags can be used like this, but other tags such as Div, IMG, and span can be used. Let's leave further associations to everyone.
By the way, you can also use the CSS selector to determine the value and display it in different styles. For example, if a negative number is displayed, it indicates a red letter. For more information, see the W3C website.
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
