为什么只有我的精灵部分显示？

我为我的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

来源

2013-01-09 Austin Davis

为什么不让你的2状态的精灵，并手动在元素上面写入文本？你的方法不是搜索引擎友好的 – b1nary

作为旁白，ID不应该以数字开始 –

也注意你可能会更好使用CSS的'：hover'伪类，而不是用JS做这个。 –

所有这个项目的HTML和CSS值得重新检查，但这里是你的spe的答案cific questions：

whatIS1031由于大写而没有显示出来。元素的ID具有大写“S”（whatIS1031），而CSS选择器具有小写字母''（whatIs1031）。
howToStart没有出现，因为它在background:url()的第一个CSS声明中缺失。相反，#h-howToStart出现两次。

注意：你应该试用Chrome的开发工具或Firebug for Firefox。它们都具有检查DOM元素的方法，以查看应用了哪些CSS样式。从那里你可以看到哪些样式丢失。

来源

2013-01-09 18:37:11 jimbojw

进一步的一面注意：虽然浏览器工具对于大多数其他事物来说远远优于其他事物，但在解决这样的问题时，验证html和css与浏览器工具一样好。 – albert

感谢您的答案和DA上的＃对ID的反应，最终导致我解决了我的问题，是的，我同意你的观点，我的HTML和CSS值得彻底改变。我仍然是新手，每天都要学习一点。 –

感谢您接受我的回答！ @ Roy的答案中的注释是我推荐的那种重构，比如使用CSS代替JS，并使用CSS级联将相同样式应用于一组元素。我还建议为所有导航元素使用类而不是ID，这样，如果您需要添加第二个导航栏（无论出于何种原因），则不必担心假定只有一个导航条网页上的特定事物。 – jimbojw

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

来源

2013-01-09 18:44:24 Roy

+1所有伟大的建议 –

为什么只有我的精灵部分显示？

回答

相关问题