CSS 네비게이션 스프라이트 호버가 작동하지 않음

Question

내 스프라이트 내비게이션의 CSS 부분을 구현하여 호버에있는 내 스프라이트의 "호버 (hover)"효과를 가져 오는 동안 문제가 있습니다. 코드를 보여 주면 설명하기가 쉽습니다.

는 CSS :

#nav { 

    width:837px; 
    float:left; 
    margin:0px 0px 0px 30px; 
    background:url(../images/withtext.gif) repeat-x; 
    height:79px; 
    position: relative; 
    top: -45px; 
} 


#nav li { 
margin:0; 
padding:0; 
list-style-type:none; 
display:inline; 
height:79px; 
text-align:center; 
float:left; 
line-height:79px; 
font-family:Georgia, "Times New Roman", Times, serif; 
} 



#nav a { 
display:block; 
height:79px; 
color:#311f11; 
text-decoration:none; 
font-size:13px; 
} 

#nav a:hover { 
background-image:url(withtext.gif); 
color:#fff; 
} 



#nav .snowboard { width:240px; } 
#nav .snowboard a:hover { background-position: 0px bottom; } 

되는 HTML :

<ul id="nav"> 
    <li class="snowboard"><a href="#">Snowboard</a></li> 
    <li class="briller"><a href="#">Briller</a></li> 
    <li class="ski"><a href="#">Ski</a></li> 
    <li class="stovler"><a href="#">Stovler</a></li> 
    <li class="handlevogn"><a href="#">Handlevogn</a></li> 

</ul> 

내비게이션 화상 :

현황

[1] http://i.imgur.com/zkVmoEN.gif "수동 및 마우스를 상태 탐색 줄" 내비게이션 :

[2] http://i.imgur.com/oZPK8kd.jpg "브라우저에서 탐색"이 호버에있는 이미지를 전체 홈을 아래로 이동하도록

그래서 어떻게 그것을해야합니까?

미리 도움을 주셔서 감사합니다.

Answer 1

는 여기가

#nav ul, #nav li{ 
    margin: 0; 
    padding: 0; 
} 
#nav { 

    width:837px; 
    float:left; 
    margin:0px 0px 0px 30px; 
    background:url(http://i.imgur.com/zkVmoEN.gif) repeat-x; 
    height:79px; 
    position: relative; 
} 

#nav li { 
margin:0; 
padding:0; 
list-style-type:none; 
display:inline; 
height:79px; 
text-align:center; 
float:left; 
line-height:79px; 
font-family:Georgia, "Times New Roman", Times, serif; 
} 

#nav a { 
display:block; 
height:79px; 
color:#311f11; 
text-decoration:none; 
font-size:13px; 
    width:150px; 
    text-indent:-9999px; 
} 
.snowboard a:hover { 
    background-image: url(http://i.imgur.com/zkVmoEN.gif); 
    background-position: -40px 80px; 
} 
.briller a:hover { 
    background-image: url(http://i.imgur.com/zkVmoEN.gif); 
    background-position: -190px 80px; 
} 
.ski a:hover { 
    background-image: url(http://i.imgur.com/zkVmoEN.gif); 
    background-position: -340px 80px; 
} 
.stovler a:hover { 
    background-image: url(http://i.imgur.com/zkVmoEN.gif); 
    background-position: -490px 80px; 
} 
.handlevogn a:hover { 
    background-image: url(http://i.imgur.com/zkVmoEN.gif); 
    background-position: -640px 80px; 
} 

Answer 2

시도 :

#nav li a { 
display:block; 
height:79px; 
color:#311f11; 
text-decoration:none; 
font-size:13px; 
} 

#nav li a:hover { 
background-image:url(withtext.gif); 
color:#fff; 
} 



#nav li.snowboard { width:240px; } 
#nav li.snowboard a:hover { background-position: 0px -79px; }/*Here change as needed.*/ 

CSS 클래스는 항상 동일한 수준에서 거래 선택기를 유지하기 위해 태그 예 : li.class{} 시도를 사용

배경 위치를 사용 픽셀 부정적인에서

foo foo2 foo2 a{} 
foo foo2 foo2 a:hover{} 

및 양.

주-OFF : 나는 당신이 당신의 CSS 바퀴를 만드는 문제가있을 경우 다양한 브라우저에서 , 당신은 CSS의 RESET을 사용하려고하는 것이 좋습니다 :

* { 여백 : 0; 패딩 : 0; list-style-type : none; }

Answer 3

CSS에 문제가있는 경우 텍스트에 호버 효과 만 추가하기 때문일 수 있습니다. 텍스트를 가리 키지 않아도되고 원하는 곳에 배경 이미지를 가질 수는 없습니다. 당신이 원하는 경우에, 당신이 시도 할 수 있습니다 :

CSS :

#nav{background:url(../images/withtext.gif) 
    repeat-x; 
    height:100px; 
    width:100%; 
    } 
li { 
background-color: #??????; 
} 
li a { 
color: black; 
} 
li:hover { 
background-color: #something_different; 
} 
li a:hover { 
color:#something_different; 
} 

또는 각 다른를 리 클래스를 갖고 싶어, 당신은 단지이 작업을 수행 할 수 있습니다 :

.snowboard li:hover { 
Some code... 
} 

.snowboard li a:hover { 
some code 
} 

하는 경우 당신은 레이아웃 이니까 기본적으로 어떤 것도 할 수 있습니다.