Question

我有一个ul菜单，存在于每个li的宽度不同的图像中。我使用精灵来做鼠标和bg。精灵包含菜单的所有可能图像。当我悬停时，我希望背景图像在每个li上向上滑动160px，并以某种方式继承水平背景位置（我知道 inherit 继承自父级，而不是从您调用的元素：hover on）

如何向上滑动背景位置，并保持水平位置相同。示例代码如下。我尝试了很多东西，包括下面例子中的继承选项，我知道有一个名为 background-position-y 的CSS3选项，但那不是crossbrowser ......

    #menubar ul li.item-101{
    width:183px;
    background-position: 0 0;
}
#menubar ul li.item-102{
    width:163px;
    background-position: -183px 0;
}
#menubar ul li.item-103{
    width:204px;
    background-position: -346px 0;
}
#menubar ul li.item-104{
    width:117px;
    background-position: -550px 0;
}
#menubar ul li.item-105{
    width:173px;
    background-position: -667px 0;
}
#menubar ul li:hover{
    background-position: inherit -160px;
}

Answer 1

目前无法使用CSS（在大多数使用过的浏览器中）。您必须在每个悬停时使用background-position: YOURVALUE -160px;。

也许有一天我们会生活在一个可能的世界里。

可能的解决方案：jQuery可以为你做到这一点，但这可能更多的工作，然后只是无脑复制粘贴你的个人：悬停，或者你可以使用background-position-y，但这只是为几个浏览器，所以不是真正的选项

Answer 2

我不会为background-position-y屏住呼吸，因为它甚至不是CSS3规范的一部分。（问题出在http://www.w3.org/Style/CSS/Tracker/issues/9）。像Chrome这样的某些浏览器已经开始实施它，但至少Firefox和Opera还没有跟进，如果他们愿意的话。

除非您想使用javascript，否则目前无法通过CSS实现此目的。

背景位置只是垂直的

2 个答案: