<

Go Premium for a chance to win a PS4. Enter to Win

x

Navigation Hover Effects with CSS Sprites

Posted on
6,334 Points
234 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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Join & Write a Comment

Suggested Videos

Title Views Activity
Box Shadow Effect in CSS 118
Embedded Flash in HTML5 90
Embedded Videos in HTML5 70
Introduction to jQuery (Part 1) 644
When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month