Interactivity with :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

View HTML and CSS code