CSS Rollover Effects and Complex CSS Layout

Two frightening limitations of CSS are: its inability to mimic table layout structure, and IE’s lack of love for the :hover effect. Many folks skirt these issues by designing only simple layouts, and by using JavaScript for more complex rollovers.

Some layouts beg for a table either because of the complexity of the layout itself or how it is intended to respond to a resized browser window. In a pinch, after having explored options within a design, I still occasionally resort to using tables to solve an occasional layout issue. Yes, I feel icky afterward.

The point is first to explore your options. If you’re performing for a client be sure these option explorations are beneficial to the client. If it’s your own personal research, push to learn something with each project. Learning opportunities will usually present themselves in every project.

Complex CSS Layout

A recent site redesign, www.slxpress.com, required the use of everything I had learned up to that point about CSS and SEO. It also presented an opportunity for me to learn something new.

The area at the center of the Student Loan Xpress home page is laid out in such a way that I initially felt the best solution would be a table, some JavaScript, and many more images. There was not only the layout to consider but a rollover of each of the four sub areas—students, graduating students, parents, and schools. Specs also called for descriptive text to appear during the rollover of each sub area.

Keeping the HTML free of clutter was important. That meant I should at least consider a table-less, JavaScript-less solution. I had recently begun using a script that helped IE get over its inability to :hover correctly over any element. It was time to put this script to the test to see what complexity it could handle so I decided to explore a table-less solution to this center area. Let’s look at what it took to get this working.

Opening the Door to CSS Rollovers in IE

First we need to get IE to :hover correctly. A tiny .htc script will work around this problem. By referencing the script’s URL as a behavior for a tag, the script forces IE mouse events onto the tag without you having to go through all the tedium of applying them yourself via the usual overbearing javascript. The script allows a CSS :hover on any element you choose to affect, not just the anchor tag. Simply refer to a hover as a class instead of a pseudo-class. When dealing with IE call it .hover instead of :hover.

The code below, using the “Star HTML” hack to focus it on IE, forces this behavior on all UL and LI tags inside .center02:

 

* html .center02 ul,
* html .center02 li { behavior: url('js/IEFixes.htc'); }

Now we can :hover over list elements via CSS to achieve several effects. Each list item in our example above also happens to have a description and a graphic that will need to hide/show or render with a transparency.

Each list item, on :hover, causes all other list items to lighten via transparency. This isn’t another graphic, or set of graphics, it’s the same four original graphics with CSS transparency applied. We achieve this by causing all LI items in this list to lighten on a :hover over the parent UL via transparency, while simultaneously employing another :hover to negate the transparency on the target LI. Transparency is also negated on all child LI items so we can read the text that is revealed on rollover. The effect is that all items lighten except the target.

CSS Transparency

There’s another bit of browser-dancing involved here since transparency isn’t very well supported. You’ll need to use filter: alpha(opacity=50); for IE and -moz-opacity: 0.5; opacity: 0.5; for other browsers.

On the same LI :hover event that brings about the transparency change, each item’s hidden description and its surrounding red box is also made visible through visibility: visible. We specifically chose not to use the display: block method because a design goal was to have the boxes overlap any text below and not to instead push text further down to make space for the rollover. Even though the description is located below the row of graphics, it is still a child of the parent item’s LI tag and therefore remains open when either the graphic or the text is hovered.

The need for a CSS solution to this complex area offered a chance to deliver a clean solution to a client, and for me, a chance to explore and learn.