Question

我的网站上有一些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正方形。

Answer 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; }

css sprites - 悬停图像无法正确加载

1 个答案:

Demo