html - 构建重叠的、奇怪旋转的 Sprite

Question

我当前的元素涉及设置一堆侧边栏链接，因此完成的设计如下所示:

信封应该移动和重叠(即更改 z-index)，具体取决于当前具有 :hover 状态的图标/文本。

我原以为每个都是一个单独的 PNG 文件，但我得到了一个看起来像这样的 sprite:

有什么建议可以实现吗？通常我只是改变每段文本所在的列表元素的背景位置，但我认为鉴于这些元素的重叠性质，这是不可能的。他是否只需要以不同的方式导出它？

非常感谢...

Answer 1

在我看来，该 sprite 看起来会很完美。最左边的图像是书本悬停时的图像，第二张图像用于推特，第三张图像用于 Facebook，第四张用于电子邮件。我猜最后一个只是默认状态。使用纯 css 和 :hover(但可能!)来完成这项工作很棘手，但是，使用 javascript 会非常容易。

对于纯 css 解决方案，带有 sprite 的 div 必须是所有文本元素的子元素，因此您可以根据 :hover 在父元素(文本)上更改背景。如果不清楚，我可以为您制作一些示例代码。

编辑:

它并不完美，但它是一个概念证明。

JsFiddle:http://jsfiddle.net/jp6fy/

CSS:

#side{
    position:relitive;
    height:341px;
    width:250px;
}

#link1{
    top:0;
}

.link{
    position:absolute;
    left:0;
    top:85px;
    height:85px;
    padding-left:160px;
    width:90px;
}

#image{
    position:absolute;
    top:-255px;
    left:0;
    z-index:-1;
    background:url(http://i.stack.imgur.com/I2Y4k.png) -720px 0;
    height:341px;
    width:150px;
}

#link1:hover #image{
    background-position:-540px 0;
}

#link2:hover #image{
    background-position:-360px 0;
}

#link3:hover #image{
    background-position:-180px 0;
}

#link4:hover #image{
    background-position:-0px 0;
}

HTML:

<div id='side'>
    <div class='link' id='link1'>
        email
        <div class='link' id='link2'>
            facebook
            <div class='link' id='link3'>
                twitter
                <div class='link' id='link4'>
                    book
                    <div id='image'></div>
                </div>
            </div>
        </div>
    </div>
</div>