Creating CSS Sprite :hover Roll Over Image Links

Question

I have a question that I hope I can get an answer to. I\'m attempting to create a website from scratch (not using Dreamweaver, Expression Web, etc.), I\'m using only notepads.

Answer 1

For CSS sprite images, you can do something like this:

HTML

    

        text
    

    

        text
    

    

        text
    

CSS

ul {width:100px;}
li { margin-bottom:5px; }
li a {
    text-indent:-9999em; /* hide our text */ 
    display:block; 
    height:40px; 
    background:url('http://placekitten.com/100/80') no-repeat 0 0; 
}

li a:hover { background-position:0 -40px;}

JSFiddle Demo

The idea is that you have 1 image, and you show half of it, and then using :hover you can change the background-position of the image to show the on/off state