TAILIEUCHUNG - The CSS Anthology: 101 Essential Tips, Tricks & Hacks- P10

The CSS Anthology: 101 Essential Tips, Tricks & Hacks- P10:Apart from writing books like this one, I write code. I make my living by building web sites and applications as, I’m sure, many readers of this book do. I use CSS to complete jobs every day, and I know what it’s like to struggle to make CSS work when the project needs to be finished the next morning. | Tabular Data 157 How do I change a row s background color when the cursor hovers over it Solution One way to boost the readability of tabular data is to change the color of the rows as users move the cursor over them to highlight the row they re reading. This can be seen in Figure . Student List Student Name Date of Birth Class ID Joe Bloggs 27 0871997 Mrs Jones 12009 William Smith 20 07 1997 21 07 1997 Mrs Jones 12010 Jane Toad Mrs Jones 12030 Amanda Williams 19 03 1997 Mrs Edwards 12021 Kylie Jameson 18 05 1997 Mrs Jones 12022 Louise Smith 17 07 1997 Mrs Edwards 12019 James Jones 04 04 1997 Mrs Edwards 12007 Figure . Highlighting a row on mouse over This can be a very simple solution all you need to do to create this effect is add the following rule to your CSS chapter05 excerpt .datatable tr hover background-color DFE7F2 color 000000 Job done Discussion This solution will work in all modern browsers including Internet Explorer 7 but it will fail to work in Internet Explorer 6. However as long as your tables are clear Download at 158 The CSS Anthology without this highlighting effect in place the highlight feature could be regarded as a nice to have rather than a necessary tool without which the site will be unusable. If you must make this feature work for Internet Explorer 6 users you can use some simple JavaScript to implement the effect. To change a row s background color when the cursor moves over it in Internet Explorer 6 and earlier you must first apply the desired style properties to a CSS class which I ve named hilite in this example chapter05 excerpt .datatable tr hover .datatable background-color DFE7F2 color 000000 Then add the following JavaScript code to your page after the table chapter05 excerpt script type text javascript var rows tr for var i 0 i i rows i .onmouseover function hilite rows i .onmouseout function .

TÀI LIỆU LIÊN QUAN