创建 CSS 精灵:悬停在图像链接上 [英] 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!

解决方案

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

这篇关于创建 CSS 精灵:悬停在图像链接上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！