ASP.NET 3.5 For Dummies®

14.1. Creating Rollover Effects

The rollover is probably the most common visual effect on Web pages, apart from those annoying animated advertisements. A rollover changes the appearance of a control according to what the mouse pointer is doing. A normal state shows the default appearance (the pointer is not on the control) and a hover state shows when the mouse pointer is over the control.

This section looks at creating rollovers that act on text and images.

14.1.1. Making a text rollover with a stylesheet

One of the easiest ways to create a rollover effect is to harness a built-in HTML style class. The anchor tag (<a>) has four pseudo-classes, :active, :hover, :link, and :visited. The :hover class applies to links with the mouse hovering over them. You've probably seen styles like the following A selector that turns the hyperlink red when the mouse pointer passes over:

A:hover {color: red}

You can build on the pseudo-class by squeezing in a class selector:

A:button:hover {color: red}

This way, the special formatting happens when the anchor tag includes class="button":

<a class="button" href="nowhere.htm">This is my hyperlink</a>

The upshot is that you get a rollover without any programming (for free in geekspeak). What's more, you can use the technique with the ASP.NET HyperLink and LinkButton controls because they render as anchors. Figure 14-1 shows a LinkButton control that resembles a button because its style rule defines borders, padding, and shading.

Figure 14-1. A LinkButton ...