Table Elements, Background Images, and the
:hover Pseudo Class

Normally, the :hover pseudo class is applied to anchor (link) tags to indicate the hover state of the link, as in a:hover. Here is an example of how CSS styling can be used to create a menu from an unordered HTML list:

• link1
• link2
• based on an example found at Listamatic

By attaching a different image to the two main link states (or as in this case, the same image only positioned differently) a kind of visual interactivity is created. This method uses CSS to style the content alone, but the technique can also be applied to layout structures as well. The key to using CSS in Freeway 4 Pro to style either content or structure is knowing what code tags identify the elements you’re looking for, whether they are parts of a list or parts of a table.

Table structure starts out fairly simple with the <table> tag to define the beginning of the table container. Then horizontal rows are defined with the <tr> tag, and individual cells with the <td> tag. In Freeway 4 Pro, you can target all these structures with Tag Styles — that is, styles that use the tag name of the item they are trying to define. Since that would target everything on the page with that tag, we will create an “empty” class style (just a name, no attributes) and apply it to a table by carefully selecting only the table then choosing the style name from the style pallette. This will single out that table (by class) so we can target it with tag styles specifically chosen for it.

Applying the :hover Pseudo Class to Table Elements

By applying the empty class style .targetcell to this table, I can then create the style .targetcell td to style the backgrounds of the cell tags of that table. By adding the pseudo class :hover to make the style .targetcell td:hover with a different background is like saying this style applies “only to the table cells of this object when the mouse pointer is hovering over them.” Note that even the cell with no link in it triggers, as it is the cell itself that is sensing the hover event. Link text is still necessary, as the link tag <a> can only be applied to content (as far as I know) and table cells are not content, but structure for content.

This table also has an empty class style to identify it, but instead of targeting the table cells, I target the row tags <tr> with the :hover pseudo class. This might be more practical (and acceptable from my point of view) for visually highlighting dense tabular data, as in the example below – which, I know, is not very dense. It was the only example I had that was handy.  

Potential Drawbacks to using the :hover Pseudo Class this way

The first, and possibly largest hurdle is browser compatibility. As of yet, I have not tested this technique in any Windows browsers. Should it not be supported by at least IE6, then this has been just an academic exercise. A second serious drawback is the effect doesn't seem to work on cells that have already been colored. Try this:

this works

and so does this

no way, josé!

But this is ok

In Conclusion

This technique may not be ready for wide use just yet, but certainly shows how CSS can be used to decorate both content and structure. For the more adventurous (or plainly curious) here is the Freeway 4 Pro 4.3.1 file to Download (29.15 K)