<

Navigation Hover Effects with CSS Sprites

Posted on
6,355 Points
255 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
Comment
0 Comments

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Join & Write a Comment

This article discusses four methods for overlaying images in a container on a web page
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month