Question

这是我的形象： - http://www.flickr.com/photos/50525207@N02/5064283850/

CSS n html

现在问题是： -

当我将鼠标悬停在链接上时，当我想要显示图像的不同部分时，会出现相同的图像。当我将鼠标移动到一个链接上时，其他链接也会移动。我想要的是： -

http://www.flickr.com/photos/50525207@N02/5063686801/

当鼠标悬停在“Link1”上时，我想要的是在背景中出现的灰色图像。当鼠标悬停在“Link2”上时会出现绿色图像，依此类推。我究竟做错了什么？我一直试图让它自昨天开始起作用但是徒劳无功。

PS：嗯，这不是BTW的实际图像。我不想要背景颜色。这将是产品的图像。哦，我希望在没有链接悬停时出现灰色图像。怎么做？

[编辑]

我在CSS中添加了以下内容： -

.sprite Div
{
    width: 728px;
    height: 243px;
}

.sprite a
{
    width: 728px;
    height: 243px;
}

在HTML IK中包含Div内部的链接，因此高度得到修复： -

<div id="SpriteDiv" class="sprite">
    My links here...
</div>

Answer 1

首先，您应该设置锚元素的大小而不悬停，这是导致其他链接转移的原因（不应在a:hover上定义维度）：

.sprite a {
  display: block;
  width: 728px; 
  height: 243px; 
}

接下来，您的图像背景被分配给锚元素，而不是跨度，因此您需要使用选择器定义这些位置，如下所示：

.sp_ID1 a {
  background-position: 0px 0px; 
}

Answer 2

Corrected根据您的评论：

最初我将灰色背景放在.container上，但这会在Chrome上造成奇怪的行为，所以我添加了.sp_ID0

<style type="text/css">
    .sprite { display: block; margin-bottom: 5px; }
    .container, .sp_ID0, .sprite div { width: 600px; height: 203px; }
    .sp_ID0, .sprite:hover div {
        background-image: url(http://farm5.static.flickr.com/4106/5064283850_fc6b5fac15_b.jpg);
        background-repeat: no-repeat;
    }
    .container  { position:relative; }
    .sp_ID0 { z-index: -2; }
    .sprite div { display: none; z-index: -1; }
    .sp_ID0, .sprite:hover div { position: absolute; top: 0px; left: 0px; display: block; }
    .sp_ID1 div { background-position: 0px -203px; }
    .sp_ID2 div { background-position: 0px -406px; }
    .sp_ID3 div { background-position: 0px -609px; }
    .sp_ID4 div { background-position: 0px -812px; }
    .sp_ID5 div { background-position: 0px -203px; }
    .sp_ID6 div { background-position: 0px -406px; }
</style>

<div class="container">
<div class="sp_ID0">&nbsp;</div>
    <a href=# class="sprite sp_ID1">Link1<div>&nbsp;</div></a>
    <a href=# class="sprite sp_ID2">Link2<div>&nbsp;</div></a>
    <a href=# class="sprite sp_ID3">Link3<div>&nbsp;</div></a>
    <a href=# class="sprite sp_ID4">Link4<div>&nbsp;</div></a>
    <a href=# class="sprite sp_ID5">Link5<div>&nbsp;</div></a>
    <a href=# class="sprite sp_ID6">Link6<div>&nbsp;</div></a>
</div>

Old solution.

实现CSS Sprites的问题

2 个答案: