:hover
The live code example below is a header navigation menu that enables
interactivity using the :hover CSS pseudo selector. On hover
of a menu item, the text goes from dark to light, the item background
image goes from light to dark, and the icon goes from a
"dormant" to "active" state.
This example uses icon fonts from
Font Awesome
instead of using traditional images included via
<img> HTML tag or sprite images included via
background-image CSS property. Icon fonts are fonts just like
Arial or Comic Sans, but instead of comprising text characters, they
contain custom monochrome image glyphs. Icon fonts are awesome because
they are super lightweight compared to traditional images and you can
easily change their size, color and any other text property. Read more
about
icon fonts