创建 CSS 精灵：悬停在图像链接上答案

【问题标题】：Creating CSS Sprite :hover Roll Over Image Links创建 CSS 精灵：悬停在图像链接上
【发布时间】：2014-01-14 15:24:34
【问题描述】：

我有一个问题希望我能得到答案。我正在尝试从头开始创建一个网站（不使用 Dreamweaver、Expression Web 等），我只使用记事本。我想要完成的是创建两个导航链接作为翻转 CSS sprite 图像（使用伪类元素：悬停）在我想稍后在页面上移动的标签内。上周我一直在尝试解决这个问题，但没有成功。我去过 www.w3schools.com 和这个网站也想找到一个解决方案，但似乎仍然无法让它正常工作。我也在一个严格的环境中，只允许我在 Win7 操作系统上使用一个浏览器 (IE8)。请原谅我糟糕的 CSS 编码；这是我第一次尝试。

目前我正在使用 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>

这是我在上面的 HTML 中使用的 CSS：

#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;
}

任何帮助或指导将不胜感激！

【问题讨论】：

如果你为不同的悬停状态使用不同的图像......你没有使用精灵。
你的精灵图像在哪里？ googleh.png 还是 google.png？ background: url('images/container.png'); 也不正确的 css 指令....
一般来说，使用精灵的目的是将所有图像状态/图标都放在同一个图像文件中。你是故意调用两个不同的图片文件吗？

标签： html css hover

【解决方案1】：

对于 CSS 精灵图像，您可以执行以下操作：

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

想法是你有1张图片，你显示一半，然后使用:hover你可以改变图片的background-position来显示on/off状态

【讨论】：

感谢大家的快速回复。我看到我忘记包含 Bing 链接的 CSS。所以基本上，我会以垂直方式有两个单独的链接，它们的 a:hover 图像将来自同一个 google.png 文件。 @Nick R，所以如果想包含两个（或更多）链接，我将如何根据上面的示例来处理 HTML 和 CSS？谢谢
@Fred 对于多个链接，你可以这样做：jsfiddle.net/9Py9m/1 或者如果你想包含一个大的精灵表图像，每个链接都悬停/正常状态，您可以只使用相同的图像，但更改 background-position 坐标，如下所示：jsfiddle.net/9Py9m/3
再次感谢您的快速响应。看起来您为我提供的上述示例适用于“达到标准”的网络浏览器。不幸的是，我目前只能在我的位置使用 IE8。我应该使用最新版本的 IE 或 FF 尝试这些链接吗？
能够访问 IE10 浏览器并查看您的 JSFIDDLES。试试你的解决方案，brb..

【解决方案2】：

@尼克R

谢谢尼克！我从上面的 JSFIDDLES 中遵循了您的示例，并通过以下方法找到了解决我的问题的方法：

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;
}

再次感谢！ 赞一个

【讨论】：