<

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

Navigation Hover Effects with CSS Sprites

Posted on
6,368 Points
268 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

Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Suggested Videos

Title Views Activity
Corner Ribbon Effect in CSS 287
Drop-Cap Effect in CSS 70
Introduction to jQuery (Part 1) 782
Lists and Links 102
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month