HTML and CSS Reference
In-Depth Information
Using the CSS Pseudo Classes
The CSSpseudoclassesalso work with the media elements. For instance, the
:hover
and
:focus
pseudo classes can be used with the
video
element to provide feedback whenever the
user moves the mouse cursor over the video file, or it gets focus because of keyboard activ-
ity. Adding the following CSS to the stylesheet defined in
Example 10
creates a brighter pink
glow around the video when the mouse cursor is over the element, or the element receives
focus:
video:hover, video:focus
{
/* add glow */
-webkit-box-shadow: 0 0 20px #f88;
box-shadow: 0 0 20px #f88;
}
Now, whenever the user moves their mouse over (or tabs to) the
video
element, a nice pink
glow pops up, as shown in
Figure 13
.
