<

Navigation Hover Effects with CSS Sprites

Posted on
6,391 Points
291 Views
1 Endorsement
Last Modified:
Experience Level: Beginner
5:16
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS
(Continuation of the CSS Image Sprite tutorial)

Video Steps

1. Create a parent ID for all the list items - Specify position: absolute and display: block

2. Style all the links in the parent ID to have equal height and display:block as well

3. Specify IDs for each icon - For each ID, specify the width of the icon and the left-position of it - Set the image as the background of the list item, but specify the location of the icon within the image

4. Specify a:hover properties for each ID - Copy the background property of the original IDs, just adjust the y coordinate

5. Set up the list in HTML - Use an unordered list with the parent ID and list items with the IDs created for each icon

1
0 Comments

Featured Post

Starting with Angular 5

Learn the essential features and functions of the popular JavaScript framework for building mobile, desktop and web applications.

Suggested Videos

Title Views Activity
Corner Ribbon Effect in CSS 309
Custom List Bullets in CSS 171
Drop-Cap Effect in CSS 77
Embedded Flash in HTML5 102
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Join us in celebrating longtime user Rowby Goren for his great contributions of engaging with other users on site. We explore his method for posing questions that are likely to yield a solution, and take a look at how his career transformed from a H…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month