배경 위치가 수직 일뿐입니다.

모든 li에 대해 너비가 다른 이미지가있는 ul-menu가 있습니다. 마우스 오버 및 bg에 스프라이트를 사용합니다. 스프라이트는 메뉴에 사용할 수있는 모든 이미지를 포함합니다. 마우스를 올리면 배경 이미지가 모든 li에서 160 픽셀 위로 슬라이드되고 배경으로 수평 위치를 상속 받기를 원합니다. 은 부모로부터 상속받은을 상속받습니다.배경 위치가 수직 일뿐입니다.

어떻게 배경 위치를 위로 밀고 가로 위치를 동일하게 유지할 수 있습니까? 아래 샘플 코드.

#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 –

안녕하세요, Jude 이 사람들은 각자 진술하여 그것을 해결합니다. 이것은 두뇌가없는 해결책이며 반복적 인 반복과 반복되는 반복이 동일하기 때문에 나에게 잘못된 생각을합니다. 나는 단지 하나만 사용하는 것이 가능해야한다고 느낍니다. CSS3가 널리 사용될 때까지는이 해결책이 없다고 생각해보십시오. –

현재 CSS (대부분의 브라우저에서 사용)로는 불가능합니다. 모든 호버마다 background-position: YOURVALUE -160px;을 사용해야합니다.

어쩌면 우리는 언젠가 이것이 가능한 세계에 살게 될 것입니다.

가능한 솔루션 : jQuery를 당신을 위해이 작업을 수행하지만, 그럼 그냥 머리가 나쁜 복사 붙여 넣기 개별 아마도 더 많은 작업을 먹으 렴 수 : 마우스 오버를하거나 몇 가지 브라우저 background-position-y하지만 그게 전부를 사용할 수있는 옵션 중 하나

출처

2012-02-06 11:51:02

내가 보유하지 것이다 ... 나는 아래의 예에서 상속 옵션을 포함하여 많은 것들을 시도하고 나는 CSS3 옵션 배경 위치-Y라고하지만 crossbrowser하지 먹으 렴가 알고 background-position-y에 대한 호흡은 CSS3 사양의 일부조차되지 않습니다. 문제는 여기 http://www.w3.org/Style/CSS/Tracker/issues/9입니다. 크롬과 같은 특정 브라우저는 어쨌든 계속 진행되었지만 적어도 파이어 폭스와 오페라는 아직 따르지 않았다.

javascript에 의지하고 싶지 않다면, 현재 CSS에서 이런 일이 발생하지 않습니다.

출처

2012-02-05 18:14:39 SimpleTouch

배경 위치가 수직 일뿐입니다.

답변

관련 문제