CODEWITHSUNDEEP
css
Hans Wassink
Hans Wassink

Reputation: 2577

Background-position just vertical

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

Upvotes: 7

Views: 5687

Answers (2)

Hans Wassink
Hans Wassink

Reputation: 2577

This is currently not possible by just using CSS (In most used browsers). You have to use background-position: YOURVALUE -160px; on every hover.

Maybe we will one day live in a world where this ís possible.

Possible solutions: jQuery can do this for you, but thats probably more work then just brainless copy pasting your individual :hovers , or you can use background-position-y but thats just for a few browsers so not really an option either

Upvotes: 6

SimpleTouch
SimpleTouch

Reputation: 158

I wouldn't hold your breath for background-position-y as it isn't even a part of the CSS3 spec. (The issue is here http://www.w3.org/Style/CSS/Tracker/issues/9). Certain browsers like Chrome have gone ahead and implemented it anyways, but at least Firefox and Opera have yet to follow, if they even will.

Unless you want to resort to javascript, there isn't really any way of doing this in CSS as things currently stand.

Upvotes: 0

Related Questions