Using the :hover to greater effect - Tables
Before IE7, the :hover could only really be used on links. This was because IE6, the major browser at the time, would not allow the :hover to be assigned to anything other than ‘a’. However, with IE7, this attribute can be used more, because IE7 & FF both understand the :hover on pretty much anything. All we, as web designers, need to do, is make sure this degrades well and that the site accessibility for IE6 users is not compromised.
If you would like to know other uses for the :hover on things other than ‘a’, please check out these posts:
http://www.csstrickery.co.uk/2007/12/08/borders-as-underlines/
That post shows how assigning hover to the ‘li’ gives a nice effect. Anyway, on with this post.
One way in which the use of :hover can be used to nice effect is making a table row change colour when the cursor is over it. In the past, we used the DOM model to do this, but now, at least in IE7 & FF, we can do this using just CSS, which I’m sure you appreciate is much better.
Firstly, simply set up your table and fill it with information like my table below.
<table>
<tr id="header">
<td>Item Name</td><td>Item Description</td><td>Item Price</td><td>In Stock?</td>
</tr>
<tr>
<td>My Book</td><td>A book about me</td><td>£12.99</td><td>Yes</td>
</tr>
<tr>
<td>My Book</td><td>A book about me</td><td>£12.99</td><td>Yes</td>
</tr>
<tr>
<td>My Book</td><td>A book about me</td><td>£12.99</td><td>Yes</td>
</tr>
<tr>
<td>My Book</td><td>A book about me</td><td>£12.99</td><td>Yes</td>
</tr>
</table>
Nothing too complex there. I have 5 rows. The first is the header row, with my cell headings, then I have four more rows which contain the table contents, in this case, my hugely popular and amazing book. If you preview that, it looks drab, boring, and certainly would not excite a reader. Very quickly, I’m going to style my table. I wont go through this bit in great detail, as, if reading this, you should know how to style a table. Here is my CSS.
table {
width: 100%;
background-color: #CCCCCC;
color: #000000;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
tr {
width: 100%;
}
#header {
font-weight: bold;
background-color: #000000;
color: #CCCCCC;
}
td {
width: 23%;
margin-left: 3px;
padding: 10px;
}
Nothing too perplexing there either. The header is assigned to the first row in the table, which makes it stand out. I’ve given the TD’s a width of 23%, not 25%, because of the margins applied. Here is how my table looks so far. Now, we get to the styling. I’ll show you the CSS, and then try to explain it.
tr:hover {
background-color: #0099CC;
color: #FFFFFF;
}
And this is the result. (Make sure to preview in IE7 or FF).
The code, which you might not expect, is very very simple. If you are struggling, just imagine that the ‘tr’ is infact ‘a’. All I’m saying is, when the ‘tr’ is hovered over, it has a background colour of #0099CC (blue) and a text colour of white. Obviously, this now gives you massive possibilities. You can change that ‘tr’ to ‘td’ or even to ‘table’.
So, hopefully, this has enlightened your mind with a whole range of possibilities of how the use of :hover can be exploited to many effects. Keep a look out for Part 2 of ‘Using the :hover’, which will look at elements such as ‘p’, ‘div’ and ‘h1′.
Leave a Reply