css sprites - 图片未正确加载的悬停答案

【问题标题】：css sprites - a hover with images not loading correctlycss sprites - 图片未正确加载的悬停
【发布时间】：2012-03-08 12:47:52
【问题描述】：

我的网站标题中有一些 css sprite，但是当页面加载时，它通常会加载 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 hover inline css-sprites sprite

【解决方案1】：

定义 css sprite 的方式与您的定义方式有些不同。

这是一个如何实现的示例。

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

Demo

【讨论】：

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