Step 18: Hover
The final step is to add hover effects using the :hover pseudo-element.
Using :hover, any style such as colours, size, fonts, alpha channels, text decoration, background images or weight, can be changed specifically for mouseovers (hovering over with the mouse).
In this design, the tabs' and buttons' background images change when hovered. Links change colour and become underlined when they are hovered over, and background colours appear behind links in the submenu.
a:hover {
text-decoration: underline;
color: #B7D1D5;
}
#menu li a:hover {
background: #422929 url(h2ah.gif) repeat-x top left;
border-right: 1px solid #4C3C3A;
}
ul.assist li a:hover, ul.dir li a:hover {
background-color: #203032;
}
a.rss:hover {
background: #FFA25A;
text-decoration: none;
color: #fff;
}
a.geourl:hover {
background: #00A250;
text-decoration: none;
color: #fff;
}
RSS