Creating CSS Sprite :hover Roll Over Image Links

问题:

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. What I'm trying to accomplish is creating two navigation links as rollover CSS sprite images (using Pseudo-class element :hover) within a tag that I would like to move around the page later. I've spent all of last week trying to resolve this issue with no success. I've been to www.w3schools.com and this site as well to find a solution, but still can't seem to get this to work correctly. I'm also in a strict environment that only allows me to use one browser (IE8) on a Win7 OS. Please pardon my lousy CSS coding; this is my first go at it.

Currently I'm using two links as shown below in HTML:

<div id="linkbox">
<ul class="GoogleFrame">
<li class="Google"><a href="www.google.com"></a></li>
</ul>
<ul class="BingFrame">
<li class="Bing"><a href="www.bing.com"></a></li>
</ul>
</div>

Here is the CSS I'm using with the above HTML:

#linkbox {
  width: 312px;
  height: 388px;
  background: url('images/container.png');
  padding: 0px;
  margin: 0px;
  position: fixed;
  left: 0px;
  top: 410px;
  z-index: 1
}

.GoogleFrame {
  position:fixed;
  left: 10px; 
  top: 100px
}

.GoogleFrame li {
  list-style:none;
  position:absolute;
}

.GoogleFrame li, .GoogleFrame a {
  height:54px;
  display:block;
}

.Google {
  left:0px;
  width:260px;
  background: url('images/google.png') 0px 0px;
}

.Google a:hover {
  background: url('images/google.png') -261px 0px;
}

Any help or guidance will be greatly appreciated!

回答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

回答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