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

@Nick R

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

HTML

 

    Google
 
 

    Bing
 

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