tailieunhanh - 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 .

• Đồ họa - Thiết kế - Flash
• thiết kế web
• giáo trình flash cơ bản
• kĩ thuật cắt html
• giáo trình photoshop
• css cơ bản
• Thiết kế trang web
• hướng dẫn Thiết kế trang web
• kinh nghiệm Thiết kế trang web
• tài liệu Thiết kế trang web
• cẩm nang Thiết kế trang web
• kỹ thuật Thiết kế trang web
• Bài giảng Thiết kế Web
• Đại cương Thiết kế Web
• Tổng quan Thiết kế Web
• Môn học Thiết kế Web
• Mục tiêu Thiết kế Web
• Giáo trình Thiết kế giao diện web
• Thiết kế và quản lý website
• Thiết kế giao diện web
• Nhận dạng các trang web
• Cấu trúc trang web
• phương pháp thiết kế trang Web
• kỹ thuật thiết kế Web
• thiết kế web nhanh
• thực hành thiết kế web
• thiết kế web đẹp
• tài liệu về thiết kế web
• thủ thuật thiết kế web
• mẹo dùng web
• học thiết kế web
• Thiết kế web động
• tài liệu Thiết kế web động
• hướng dẫn Thiết kế web động
• kinh nghiệm Thiết kế web động
• cẩm nang Thiết kế web động