Part 4:
Changing a row's background color
when the mouse hovers over it?
One way to boost the readability of tabular data is to change the color of rows as users move the cursor over them to highlight the row they’re reading.
Before we can get started, you need to download the following file. Once you decompress the file, open it in both a text editor and in your browser.
Before we can get started, you need to download the following file. Once you decompress the file, open it in both a text editor and in your browser.
|
This can be a very simple solution; all you need to do is add the following type of rule to your CSS:
tr:hover { background-color: #DFE7F2; color: #000; } Test it out and you will see the row color change as you move your mouse over it. If yours isn't working and you want to see what should be happening, either click on the table image to the right, or check out this link Table 4 Solution 1 |
Be Sure To Click The Table |
We think of using :hover only on links, but you can also use :hover on other elements to create attractive effects; in addition, these serve to give the user feedback as to what they’re interacting with.
For example, you could put it on titles or headings, or maybe even a caption. The imagination is the only limit.
Don't forget there are other states for links, like active..... What a treat when we hover and / or click on the rows.
Click on the table below to see it all in action or click here.
For example, you could put it on titles or headings, or maybe even a caption. The imagination is the only limit.
Don't forget there are other states for links, like active..... What a treat when we hover and / or click on the rows.
Click on the table below to see it all in action or click here.
Be Sure To Click The Table To See The Action
This is a great way to allow the reader to keep track of which row they are currently viewing or reading.
Everything we learned here can be combined to add a little something special to the table that we created in part 3 with the alternating rows. Click on the table below to see it all in action or click on this link.