3

我得到了一张精灵图片，它是一个面包屑菜单。当鼠标悬停菜单元素时，我想更改此精灵的 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/

4

1 回答 1

3

是的，让我们从这样一个事实开始，即你的精灵方式是完全没有必要的。我明白为什么，但是通过一些仔细的编码可以解决它。

使用:before伪元素，我在每个项目之后创建了三角形。现在每个项目都使用 CSS 而不是 jQuery（更整洁）对锚点上的悬停做出反应。浏览器支持不会下降到 IE7，但大多数事情也不会。

这是小提琴： http: //jsfiddle.net/robsterlini/RtqkD/5/（编辑对填充问题进行了排序http://jsfiddle.net/robsterlini/RtqkD/6/）

这里是使用的元素：箭头精灵，背景精灵（如果你想与精灵非常紧密，你甚至可以将它们一起精灵，只是要小心你是怎么做的。

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

于 2013-07-31T08:30:39.220 回答