背景位置只是垂直的

Question

我有一个ul菜单,存在于每个li的不同宽度的图像.我使用精灵来做鼠标和bg.精灵包含菜单的所有可能图像.当我悬停时,我希望背景图像在每个li上向上滑动160px,并以某种方式继承水平背景位置(我理解继承继承自父级,而不是从您调用的元素: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但这只是为几个浏览器,所以不是真的一个选项