如何用css创建精灵

Question

在上面的图片中我将鼠标悬停在博客上显示

当我将鼠标悬停在推特上时显示

Live example of website

Answer 1

这里的技巧是在图像之间设置空间并在CSS中设置background-position的值。以下是上述网站的实际精灵。

http://www.chaudharygroup.com/templates/cg/images/social-network-icons.jpg

然后，您可以在:hover上设置CSS中锚点或列表项的宽度。

更新

似乎说起来容易做起来难，但按预期工作。下面是CSS中的代码行。

ul {
    position: relative;
    width: 150px;
    height: 25px;
    display: block;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
ul li {
    display: block;
    float: left;
    margin: 0;
    padding: 0;
}
ul li a {
    background: transparent url('sprite-images.jpg');
    display: block;
    width: 25px;
    height: 25px;
}
ul li:hover {
    position: absolute;
    left: 0;
    top: 0;
    width: 150px;
}
/** Set Width on mouseover. Not only anchor tags has the privilege to
    use the :hover nowadays. **/
ul li:hover a {
    width: 150px;
}

/** These codes below that SOers are trying to tell you. **/
ul li.b a {
    background-position: 0 0;
}
ul li.t a {
    background-position: -29px 0;
}
ul li.f a {
    background-position: -58px 0;
}
ul li.y a {
    background-position: -90px 0;
}
ul li.b:hover a {
    background-position: -173px 0;
}
ul li.t:hover a {
    background-position: -315px 0;
}
ul li.f:hover a {
    background-position: -477px 0;
}

<强>演示

http://jsfiddle.net/jlratwil/fBDnN/17/