3

这些 Sprite 按钮让我发疯。我几乎可以让他们工作，但不完全是。

我正在玩这个非常简单的精灵图像：

jp2Rollover Sprite

我有一个 jsfiddle 项目>> HERE <<如果你想看的话，但如果你只是想看的话，代码在下面。

对于我的 CSS，我有以下内容：

#menu {
  left:10px;
  top:50px;
  height:300px;
  width: 147px;
  position:fixed;
}
.sprite {
  background: url('http://www.jp2code.net/logos/jp2Rollover.png') 0px -100px no-repeat;
  height:50px;
  padding-left: 50px;
  width:147px;
  z-index:1;
}
.sprite a {
  background-position: 0px 0px;
  color:Red;
  vertical-align: middle;
}
.sprite a:hover {
  background-position: 0px -50px;
  color:Yellow;
}
​

这样，我的 HTML 就变得简单而小巧：

<html>
<body>
  <ul id="menu">
    <li class="sprite">You Are Here</li>
    <li class="sprite"><a href="#A">Contact</li>
    <li class="sprite"><a href="#B">Projects</li>
  </ul>
</body>
</html>​

我似乎无法显示我的活动链接图像（位置 0）或悬停链接图像（位置 50）。

另外，我想找到一种方法使整个矩形区域（50 x 147）成为超链接。

有人可以帮我吗？

4

6 回答 6

2

我更新了你的小提琴：http: //jsfiddle.net/PZh9F/12/

当您设置了 ul 的背景（应该如此）时，您还需要ul在悬停时更改它的背景位置，所以不要a像您所做的那样。但是应该更改文本颜色，a:hover我希望这会为您指明正确的方向。

于 2012-08-08T21:25:39.833 回答
2

那是你想要得到的：http: //jsfiddle.net/PZh9F/37/？

CSS：

#menu { left:10px; top:50px; height:300px; width: 147px; position:fixed; }
.sprite { background: url('http://www.jp2code.net/logos/jp2Rollover.png') 0px -100px no-repeat; height:50px; padding-left: 50px; width:147px; z-index:1; }
.sprite a { background-position: 0px 100px; color:Red; vertical-align: middle; }
.sprite.current { background-position: 0px 0px; }
.sprite:hover { background-position: 0px -50px; }
.sprite:hover a { color:Yellow; }

和 HTML：​</p> 

<html>
<body>
  <ul id="menu">
    <li class="sprite current">You Are Here</li>
    <li class="sprite"><a href="#A">Contact</li>
    <li class="sprite"><a href="#B">Projects</li>
  </ul>
</body>
</html>​
于 2012-08-08T21:26:38.727 回答
1

y 轴的背景位置应具有负值 -50px 和 -100px。

于 2012-08-08T21:25:48.717 回答
1

您将应用于background标签<li>和标签background-position，<a>而不是将两者应用于同一组标签。

于 2012-08-08T21:25:11.683 回答
1

您为 li.sprite 而不是超链接定义了背景。这就是为什么当 a:hover 发生时没有背景可以向下 -50px 。

.sprite a {
   background-image: url('http://www.jp2code.net/logos/jp2Rollover.png');
   background-position: 0px -100px;
   color:Red;
   vertical-align: middle;
   display:block;
   width:147px;
   height:50px;
  }
.sprite a:hover {

   background-position: 0px -50px;

  }
于 2012-08-08T21:25:31.603 回答
1

只是几个问题：

锚标签没有关闭，所以这可能会导致一些问题。

任何时候你想让某个东西表现得像一个链接，它应该使用一个锚标签；我注意到第一个 li 标签只是文本。从技术上讲，您仍然可以达到相同的效果，但我猜您正在尝试链接到某些东西。

当您将 html 文本用于使用背景图像的按钮内的链接时，我建议将文本放入一个 span 中，以便于格式化。当您在不使用跨度的情况下向锚标记添加填充时，即使设置了宽度，您也可以在某些浏览器的另一端获得额外的填充。只是我多年来学到的一个小技巧。

使用精灵时，请确保将高度、宽度和 display:block 属性添加到“a”选择器。这将确保整个链接都是可点击的。

看起来你的一些悬停在跳跃，这可能是你的精灵的问题。您的测量准确无误至关重要。如果它甚至偏离 1px，它会产生不希望的闪烁效果。

完整代码在这里：http: //jsfiddle.net/PZh9F/65/

希望有帮助！

于 2012-08-08T21:59:26.970 回答