只是垂直的背景位置

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

如何向上滑动背景位置并保持水平位置相同。下面的示例代码。我尝试了很多事情，包括在下面的例子中的继承选项，我知道有一个CSS3选择叫背景位置-Y但那不是跨浏览器...

#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; 
}

来源

2012-02-05 Hans Wassink

愿这些材料对你有所帮助。 http://stylemeltdown.com/image-sprite-navigation-with-css/ http://line25.com/wp-content/uploads/2009/css-menu/demo/demo.html – 2012-02-05 11:07:07

Hey Jude，都这些人通过陈述每个问题来解决它：分开盘旋，这就是我最终做到的。这是毫无意义的解决方案，我感觉有点不对劲，因为它的重复性和每一次重复都一样。我觉得应该可以使用一个：悬停，每个都有x：-160。直到CSS3被广泛使用，猜测没有解决方案：s – 2012-02-05 14:31:44

这是目前不可能通过只使用CSS（在大多数使用的浏览器）。每次悬停时必须使用background-position: YOURVALUE -160px;。

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

可能的解决方案：jQuery的可以为你做这个，但是那可能更多的工作，那么就没有头脑复制粘贴您的个人：悬停，也可以使用background-position-y但是那只是几个浏览器，因此不是一个真正的选择或者

来源

2012-02-06 11:51:02

我不会持有你的呼吸为background-position-y，因为它甚至不是CSS3规范的一部分。（问题在这里http://www.w3.org/Style/CSS/Tracker/issues/9）。 Chrome等某些浏览器已经推出并实施了它，但至少Firefox和Opera尚未遵循，如果他们甚至会。

除非你想诉诸JavaScript，否则目前还没有任何方法可以在CSS中做到这一点。

来源

2012-02-05 18:14:39 SimpleTouch

只是垂直的背景位置

回答

相关问题