css - 我的 Sprite 如何响应？

Question

我得到了一张 sprite 图片，它是一个面包屑菜单。当鼠标悬停在菜单元素上时，我想更改此 Sprite 的 y 位置。 使用固定宽度的网站没有问题，但我无法使用响应式网站解决此问题...

这是实时版本:http://jsfiddle.net/RtqkD/ 和我的 CSS 代码:

   .services {
    height: 64px;
    width: auto;
    background: transparent url('https://dl.dropboxusercontent.com/u/3894287/sprite.png') no-repeat 0 0;
    background-size: 100%;
}
.services #Et1 {
    margin-left: 60px;
}
.services #Et1, .services #Et2, .services #Et3, .services #Et4 {
    height: 65px;
}
.services li {
    float: left;
    width: 210px;
    position: relative;
    background: none;
}
.services li a {
    display: block;
    padding: 8px 7px 8px 7px;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
}
.services li:first-child a {
    padding-left: 10px;
}

有什么建议吗？

编辑 在@Sven 发表评论后，我在这里使用 CSS、HTML 和 Javascript 制作了一个更完整的问题实时版本:http://jsfiddle.net/RtqkD/2/

Answer 1

好吧，让我们从这样一个事实开始:您的 spriting 方式完全没有必要。我知道为什么了，但是通过一些仔细的编码就可以绕过它。

使用 :before 伪元素，我在每个元素之后创建了三 Angular 形。现在每个元素都使用 CSS 而不是 jQuery(更简洁)对 anchor 上的悬停使用react。浏览器支持不会下降到 IE7，但大多数事情也不会。

这是 fiddle :http://jsfiddle.net/robsterlini/RtqkD/5/ (编辑 对填充问题进行排序 http://jsfiddle.net/robsterlini/RtqkD/6/ )

这里是使用的元素:arrow sprite , background sprite (如果你想与 sprite 非常紧密，你甚至可以将它们拼在一起，只是要小心你如何做。

我花了一点时间才弄明白，所以如果您需要任何解释，请告诉我 :) 希望对您有所帮助!