13.4. Rollovers with mouseover and mouseout

Two more events fired by mouse movements are mouseover and mouseout. When the mouse cursor moves into an element, a mouseover event occurs for that element. When the cursor leaves the element, a mouseout event occurs. The example in Figs. 13.6–13.7 uses these events to achieve a rollover effect that updates text when the mouse cursor moves over it. We also introduce a technique for creating rollover images—though you’ve already seen that image rollover effects can be accomplished with CSS3 as well. We do not show the example’s style.css file, because the styles it contains have all been demonstrated previously.

HTML5 Document

The HTML5 document (Fig. 13.6) contains an h1 with a nested img, a paragraph and a div with a nested unordered list. The unordered list contains the hexadecimal color codes for 16 basic HTML colors. Each list item’s id is set to the color name for the hexadecimal color value that’s displayed. The style.css file provides CSS rules that set the div’s width and border and that display the unordered list’s elements in inline-block format. The div’s width allows only four list items per line.