html - 如何用css创建精灵

Question

在上图中，当我将鼠标悬停在博客上时，它显示

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

网站实例

Answer 1

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

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

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

更新

似乎说起来容易做起来难，但按预期工作。下面是 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/