<

Watch Navigation Hover Effects with CSS Sprites

Posted on
6,402 Points
302 Views
1 Endorsement
Last Modified:
Published
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

Suggested Videos

Title Views Activity
Embedded Flash in HTML5 102
Embedded Videos in HTML5 84
Rounded Corner Effect in CSS 70
Introduction to HTML (Part 2) 150
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
There's never been a better time to become a computer scientist. Employment growth in the field is expected to reach 22% overall by 2020, and if you want to get in on the action, it’s a good idea to think about at least minoring in computer science …

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month