a : hover background-postition 문제

Question

이유가 무엇인지 모르겠지만 그 이유는 모르겠지만 다음은 작동하지 않습니다. 배경 위치는 호버 위에서 동일하게 유지됩니다. 나는 이유를 알 수 없다. 나는 그것을 다른 방법으로 할 수는 있지만, 그것이 효과가없는 이유의 바닥에 가려고합니다.

#nav a:link, #nav a:visited { 
    background:url(../img/nav-sprite.png) no-repeat; 
    display:block; 
    float:left; 
    height:200px; 
    padding:10px; 
    text-indent:-9999px; 
    border:solid 1px red; 
} 

    #nav a#home { 
     background-position:-10px 0px; 
     width:30px; 
    } 
    #nav a#about-us { 
     background-position:-85px 0px; 
     width:45px; 
    } 

#nav a:hover { 
    background-position:1px -15px; 
} 

아무도이 문제의 원인을 알 수 있습니까?

미리 감사드립니다.

라이언

Answer 1

의 ID 선택기는 의사 클래스 선택기를 통해 우선 순위가 .. 따라서 # 규칙이 : 규칙에 의해 오버라이드 (override)되지 않습니다

..

중 하나를 ! important 지시어를 사용하십시오.

#nav a:hover { 
    background-position:1px -15px!important; 
} 

내가 더 이상 관련이없는 것을 알고 있지만

#nav a#home:hover, #nav a#about-us:hover { 
    background-position:1px -15px; 
} 

Answer 2

#nav a#home 및 #nav a#about-us는 #nav a:hover (ID> 의사 클래스)보다 높은 특이성을 가지고, 그래서 후자는 적용되지 않습니다. #nav a#home:hover 및 #nav a#about-us:hover이 여기에서 작동합니다.

the cascade을 참조하십시오.

Answer 3

이 시도 :

#nav a#home:hover, #nav a#about-us:hover { 
    background-position:1px -15px; 
} 

Answer 4

규칙이 더 구체적 할 또 하나 개의 옵션이 있습니다, 그래서 누군가가 여기에 얻을 것이다 경우 : 클래스에

변경 IDS. Intead of <a id="home"> <a class="home">을 사용하십시오. 이제 스타일을 a#home에서 a.home으로 변경하면 효과가 있습니다.

전체 코드 :

<div id="nav"> 
    <a href="#" class="home">Home</a> 
    <a href="#" class="about-us">About Us</a> 
</div> 

<style> 
     #nav a:link, #nav a:visited 
     { 
      background: url('smile-icon.jpg') no-repeat; 
      display: block; 
      float: left; 
      height: 140px; 
      padding: 10px; 
      text-indent: -9999px; 
      border: solid 1px red; 
     } 

     #nav a.home 
     { 
      background-position: -10px 0px; 
      width: 30px; 
     } 

     #nav a.about-us 
     { 
      background-position: -85px 0px; 
      width: 45px; 
     } 

     #nav a:hover 
     { 
      background-position: 1px -15px; 
     } 
    </style>