Html CSS精灵按钮_Html_Css_Css Sprites

Html CSS精灵按钮

html css

Html CSS精灵按钮,html,css,css-sprites,Html,Css,Css Sprites,这些雪碧按钮快把我逼疯了。我几乎可以让他们工作，但不完全可以我正在玩这个非常简单的精灵图像：我有一个JSFIDLE项目>>在这里您将背景应用于标记，将背景位置应用于标记，而不是将两者应用于同一组标记。您为li.sprite定义了背景，而不是超链接。这就是为什么当a:悬停发生时，没有背景可以下降-50px .sprite a { background-image: url('http://www.jp2code.net/logos/jp2Rollover.png'); backg

这些雪碧按钮快把我逼疯了。我几乎可以让他们工作，但不完全可以

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

我有一个JSFIDLE项目>>在这里您将

背景应用于标记，将背景位置应用于标记，而不是将两者应用于同一组标记。
您为li.sprite定义了背景，而不是超链接。这就是为什么当a:悬停发生时，没有背景可以下降-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;

  }

我更新了你的小提琴：
当您设置ul的背景时（应如此），您还需要在悬停时更改相同的ul
的backgound位置，因此a
不需要像您所做的那样。更改文本颜色时，应使用a:hover
完成。我希望这能为您指明正确的方向。
y轴背景位置的负值应为-50px和-100px。
这就是您想要的：
CSS:
和HTML：



您就在这里
联系人
项目


只有几个问题：
锚定标记未关闭，因此可能导致了一些问题
任何时候你想让某个东西表现得像一个链接，它应该使用一个锚标记；我注意到第一个li标签只是文本。从技术上讲，你仍然可以达到同样的效果，但我猜你在试图链接到某个东西
当您在使用背景图像的按钮中使用html文本作为链接时，我建议将文本放入一个跨度中，这样更易于格式化。当您在不使用跨度的情况下向锚定标记添加填充时，在某些浏览器中，即使设置了宽度，也可以在另一端获得额外的填充。这只是我多年来学会的一个小把戏
使用精灵时，请确保将高度、宽度和显示：块特性添加到“a”选择器。这将确保整个链接是可点击的
看起来你的一些悬停在跳跃，这可能是你的精灵的问题。重要的是你的测量是准确的。如果它的1px关闭它可以产生一个不想要的闪烁效果
完整代码如下：

希望有帮助 哦！差不多。不过，“你在这里”应该是死链接（底部精灵）。我要看看你现在做了什么…@jp2code我已经更新了我评论中的链接。很有希望，现在一切都按需要进行了。显然，如何指定标记很重要，我不能（不应该）使用负值作为初始位置。酷！这几乎正是我想要的。你刚刚发布的版本（#65）在“你在这里”部分显示了第二个图像（@50px），而不是第一个图像（@0px）。有没有一种方法可以让“you Are Here”（你在这里）部分变成深灰色，而不是像超链接一样？我不知道你为什么不想让它成为超链接，但使用深灰色背景图像所要做的就是删除活动类。如果您不打算将其用作链接（将您带到另一个页面），请将样式应用于“li”选择器，而不是“a”选择器。嗨，jenhan。如果菜单有PageA、PageB和PageC，但显示的是PageA，则Menu.PageA不需要是链接。工作，最终结果是。
<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>

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

  }

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