CSS Rollovers
A rollover is a visual effect in which an item
on the page changes when the pointer is placed over it. It has proven to
be an effective interface device for indicating that a button or link is
interactive and is ready to be clicked. Previously, it was necessary to
use JavaScript to create rollover effects, but the same thing can be
accomplished with CSS alone using the :hover
pseudoclass selector.
It should be noted that Internet Explorer 6 (and earlier) does not
support :hover
on elements other than
links (a
), so this section focuses on
text and image link rollovers . The good news is that IE 7 expands the use of :hover
to apply to all elements.
Get Web Design in a Nutshell, 3rd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.