Question

谁是Sprites的高手？

我今天在网站上更新了代码，并且必须在过去的某个时间对CSS进行一些更改。

现在，Sprite不会像它应该的那样被鼠标移除。

CSS：

.sprite {
  position: relative;
  margin-top: 5px;
  text-shadow:4px 4px 8px #696969;
  vertical-align: -10px;
}
.sprite span {
  top: 10px;
  padding-left: 15px;
}
.sprite a {
  background: url('http://i.imgur.com/92jBDie.png') no-repeat fixed 0 -100px;
  color:Silver;
  display:block; 
  height:50px;
  width:150px;    
}
.sprite a:hover {
  background-position: 0 -50px;
  color:Red;
}
.sprite a:active {
  background-position: 0 0;        
  color:Black;
}

HTML：

<div>
  <ul id="menu">
    <li class="sprite"><a><span>1</span></a></li>
    <li class="sprite"><a><span>2</span></a></li>
    <li class="sprite"><a><span>3</span></a></li>
    <li class="sprite"><a><span>4</span></a></li>
    <li class="sprite"><a><span>5</span></a></li>
  </ul>
</div>

在Fiddle

中

今天我花了太多时间试图解决这个问题。

有人可以帮忙吗？

Answer 1

它与精灵无关，列表和正文正在添加边距和填充（默认情况下）。

实现重置样式表或手动清除它们：

我添加了

body, div, ul, li {
    margin: 0;
    padding: 0;
}

并在/*margin-top: 5px;*/

中注明了.sprite

请参阅此处的小提琴：http://jsfiddle.net/KEfhd/2/

Answer 2

以下一行

.sprite a {
      background: url('http://i.imgur.com/92jBDie.png') no-repeat fixed 0 -100px;
}

应该是

.sprite a {
      background: url('http://i.imgur.com/92jBDie.png') no-repeat 0 -100px;
}

像这样：http://jsfiddle.net/KEfhd/3/

CSS Sprite不起作用 - 编辑这个小提琴

2 个答案: