爲什麼只有我的精靈部分顯示？

Question

我爲我的naviagtion欄創建了一個精靈，以便通過javascript/jquery，我可以輕鬆地在懸停開/關狀態之間進行切換。我的問題是不確定我的CSS顯示CSS類＃什麼IS1031＃1031Exchange和#howToStart沒有顯示出來。

這裏是我的HTML

<ul id="nav"> 
      <li class="nav-button" id="home"><a href="Index.html"></a></li> 
      <li class="nav-button" id="whatIS1031"><a href="whatIs1031.html"></a></li> 
      <li class="nav-button" id="1031Exchange"><a href="exchangeRequ.html"></a></li> 
      <li class="nav-button" id="typesOfExchange"><a href="typesOfExchange.html"></a></li> 
      <li class="nav-button" id="whyCLX"><a href="howToStart.html"></a></li> 
      <li class="nav-button" id="howToStart"><a href="whyCLX.html"></a></li> 
      <li class="nav-button" id="resources"><a href="resources.html"></a></li> 
      <li class="nav-button" id="faq"><a href="fAQs.html"></a></li> 
      <li class="nav-button" id="fee"><a href="fees.html"></a></li> 
      <li class="nav-button" id="contactUs"><a href="contactUs.html"></a></li> 
     </ul> 
     <!--End of nav--> 

這裏是我的CSS

#home, #home, #whatIs1031, #whatIs1031, #h-1031Exchange, #h-1031Exchange, #typesOfExchange, #h-typesOfExchange, #whyCLX, #h-whyCLX, #h-howToStart, #h-howToStart, #resources, #h-resources, #faq, #h-faq, #fee, #h-fee, #contactUs, #h-contactUs{ 
    background: url(http://i1287.photobucket.com/albums/a634/debuggingfool/nav_zps03a73d67.png) no-repeat; 
} 

#h-home{ 
    background-position: -222px 0; 
    width: 225px; 
    height: 30px; 
} 

#home{ 
    background-position: 0 0; 
    width: 225px; 
    height: 30px; 
} 

#whatIs1031{ 
    background-position: 0 36px; 
    width: 225px; 
    height: 30px; 
} 

#h-whatIs1031{ 
    background-position: -223px -36px; 
    width: 225px; 
    height: 30px; 
} 

#1031Exchange{ 
    background-position: 0 -72px; 
    width: 225px; 
    height: 30px; 
} 

#h-1031Exchange{ 
    background-position: -224px -73px; 
    width: 225px; 
    height: 30px; 
} 

#typesOfExchange{ 
    background-position: 0 -111px; 
    width: 225px; 
    height: 30px; 
} 

h-typesOfExchange{ 
    background-position: -226px -112px; 
    width: 225px; 
    height: 30px; 
} 

#h-whyCLX{ 
    background-position: -227px -150px; 
    width: 225px; 
    height: 30px; 
} 

#whyCLX{ 
    background-position: 0 -150px; 
    width: 225px; 
    height: 30px; 
} 

#howToStart{ 
    background-position: 0 -190px; 
    width: 225px; 
    height: 30px; 
} 

#h-howToStart{ 
    background-position: -230px -189px; 
    width: 225px; 
    height: 30px; 
} 

#h-resources{ 
    background-position: -230px -226px; 
    width: 225px; 
    height: 30px; 
} 

#resources{ 
    background-position: 0 -227px ; 
    width: 225px; 
    height: 30px; 
} 

#faq{ 
    background-position: 0 -264px ; 
    width: 225px; 
    height: 30px; 
} 

#h-faq{ 
    background-position: -230px -263px ; 
    width: 225px; 
    height: 30px; 
} 

#fee{ 
    background-position: 0 -302px ; 
    width: 225px; 
    height: 30px; 
} 

#h-fee{ 
    background-position: -231px -300px ; 
    width: 225px; 
    height: 30px; 
} 

#contactUs{ 
    background-position: 0 -341px ; 
    width: 225px; 
    height: 30px; 
} 

#h-contactUs{ 
    background-position: -231px -337px ; 
    width: 225px; 
    height: 30px; 
} 

這裏是我的代碼codepen http://codepen.io/Austin-Davis/pen/Fdhej
這是我的精靈的photobucket副本http://s1287.beta.photobucket.com/user/debuggingfool/media/nav_zps03a73d67.png.html

Answer 1

所有這個項目的HTML和CSS值得重新檢查，但這裏是你的spe的答案cific questions：

• whatIS1031由於大寫而沒有顯示出來。元素的ID具有大寫「S」（whatIS1031），而CSS選擇器具有小寫字母''（whatIs1031）。
• howToStart沒有出現，因爲它在background:url()的第一個CSS聲明中缺失。相反，#h-howToStart出現兩次。

注意：你應該試用Chrome的開發工具或Firebug for Firefox。它們都具有檢查DOM元素的方法，以查看應用了哪些CSS樣式。從那裏你可以看到哪些樣式丟失。

Answer 2

在addtion這裏提到的具體ID命名的問題，沒有理由在JavaScript要做到這一點，因爲CSS有一個完美的解決方案：

讓我們用#home作爲一個例子：

#home { 
    background-position: 0 0; 
} 

#home:hover { 
    background-position: -222px 0; 
}  

對每個元素重複此操作。 您可能還需要優化你的CSS：

而不是應用的背景圖像對具體每個ID的 -

#home, #home, #whatIs1031, #whatIs1031, #h-1031Exchange, #h-1031Exchange, #typesOfExchange, #h-typesOfExchange, #whyCLX, #h-whyCLX, #h-howToStart, #h-howToStart, #resources, #h-resources, #faq, #h-faq, #fee, #h-fee, #contactUs, #h-contactUs{ 
    background: url(http://i1287.photobucket.com/albums/a634/debuggingfool/nav_zps03a73d67.png) no-repeat; 
} 

使用已經應用到你的元素的類：

.nav-button { 
    background: url(http://i1287.photobucket.com/albums/a634/debuggingfool/nav_zps03a73d67.png) no-repeat; 
} 

也是，您不必爲每個ID單獨分配元素大小（如果它們大小相同）。只是使用 -

.nav-button { 
    background: url(http://i1287.photobucket.com/albums/a634/debuggingfool/nav_zps03a73d67.png) no-repeat; 
    width:225px; 
    height:30px; 
}