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

<ul>
    <li>
        <a href="#">text</a>
    </li>

    <li>
        <a href="#">text</a>
    </li>

    <li>
        <a href="#">text</a>
    </li>
</ul>

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

Answer 2

@Nick R

Thanks Nick! I followed your examples from the above JSFIDDLES and found a resolution to my problem by the below following:

HTML

<ul>
 <li class="Google">
    <a href="#">Google</a>
 </li>
 <li class="Bing">
    <a href="#">Bing</a>
 </li>
</ul>

CSS

ul {
  width:260px;
  position: fixed;
  left: 1px;
  top: 200px;
  z-index: 1
}

li { 
  margin-bottom:5px;
}

li a {
  text-indent:-9999em; /* hide our text */ 
  display:block; 
  height:44px;
}

li.Google a {
  background: url('images/google.png') 0px 0px;
  no-repeat 0 0;
}

li.Google a:hover {
  background-position: -260px 0px;
}

li.Bing a {
  background: url('images/google.png') -520px 0px;
  no-repeat 0 0;
}

li.Bing a:hover {
  background-position: -779px 0px;
}

Thanks again! thumbs up