css精灵-图像加载不正确的悬停

我有一些css精灵在我的网站的标题，但当页面加载时，它经常加载8个单独的图像，就在它的位置下方。然后我等待几秒钟，或者将鼠标悬停在它们上面，它就会回到正确的位置

以下是我的CSS：

.x {
display: inline-block }
.x a {
display:block;
width:100px;
height:100px;
overflow:hidden;}
.x a:hover img {
margin-left:-100px;}

然后HTML是这样的：

<div class='x'><a href='link' alt='y'><img src=
'image' /></a></div> &nbsp;
<div class='x'><a href='link' alt='y'><img
src='image' />
</a></div>

---

对于一行8个单独的100x100个正方形。

定义css精灵的方式与您的操作方式稍有不同

以下是如何实现这一目标的示例

/* This is how to define a main image
.sprite { background: url("../link/to/spriteimage.png") 0px 0px; width: 32px; height: 32px; }

/* Assign an image like this way, by changing the position
.sprite.icon1 { background-position: -32px -32px; }
.sprite.icon1_hover { background-position: -64px -32px; }

---

我应该在header.php中输入什么html？我不清楚你在问什么。我不知道，header.php应该是什么，这是您的逻辑。我刚才告诉过你如何定义精灵图像。@brycead，这是我刚才告诉你的一个例子谢谢你，根据你发布的内容找到了一个解决方案，因此加载效率更高。