<!-- SophiaKnows -->

CSS ROLLOVERS
Rev 2: December 2004

 

DEMO 1 DEMO 2 DEMO 3

 

In General: The examples above demonstrate several CSS hover: behaviors which can be used to replace and expand on common javascript onMouse event effects and methods (i.e. rollovers).

All three examples use a common set of inline anchor links styled by CSS .class-name statements setting and then dynamically altering one or more of the anchor's attributes:

    <a href="#" class=name>DEMO 1</a>
    <a href="#" class=name>DEMO 2</a>
    <a href="#" class=name>DEMO 3</a>

Only the last example uses an image.

Using hover: to dynamically reassign CSS text and box properties doesn't just work with anchor links but pretty much any inline structural or block elements, paragraphs, buttons, divs etc.

 



Rollover buttons were a slick trick in 1997. They added a little flash to a basically static page and served as a dynamic visual cue.

However, even in 1997 they had their problems. It was irksome handcrafting individual button images in place of standard links and doubly so making the rollover duplicates.

More to the point, loading a mass of images slowed down page render, and even with a preload utility the initial animation could be a little quirky.

Fortunately, a few of things have changed since 1997, most significantly: (1) onscreen font smoothing; and (2) CSS compliant browsers.

DEMO 1 DEMO 2 DEMO 3

DEMO 1 DEMO 2 DEMO 3

DEMO 1 DEMO 2 DEMO 3

< CODEBASE | TOP^ | MAINPAGE >

Text & Design By Tony Pisarra
© SophiaKnows 1998-2004