背景位置只是垂直

发布于 2025-01-02 23:40:01 字数 764 浏览 0 评论 0原文

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

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

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

原文

I have a ul-menu that exists out of images with different widths for every li. I use a sprite for the mouseovers and bg. The sprite contains all the possible images for the menu. When I hover I want the background image to slide 160px up on every li, and somehow inherit the horizontal background position (I understand that inherit inherits from a parent, not from the element you call :hover on).

How can I slide the background position up, and keep the horizontal position the same. Sample code below. I tried a lot of things, including the inherit option in the example below and I know there is a CSS3 option called background-position-y but thats not 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;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

寻找我们的幸福 2025-01-09 23:40:01

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

也许有一天我们会生活在一个可以做到这一点的世界。

可能的解决方案： jQuery 可以为你做到这一点，但这可能比无脑复制粘贴你个人的 :hovers 需要更多的工作，或者你可以使用 background-position-y 但这仅适用于少数浏览器，所以不是确实是一个选择

回复收藏 0 原文

无妨# 2025-01-09 23:40:01

我不会为 background-position-y 屏住呼吸，因为它甚至不是 CSS3 规范的一部分。（问题在这里 http://www.w3.org/Style/CSS/ Tracker/issues/9）。无论如何，像 Chrome 这样的某些浏览器已经率先实现了它，但至少 Firefox 和 Opera 还没有效仿，即使他们愿意。

除非你想求助于 javascript，否则就目前情况而言，在 CSS 中确实没有任何方法可以做到这一点。

回复收藏 0 原文

~没有更多了~