Question

我为我的naviagtion栏创建了一个sprite，这样通过javascript / Jquery我可以轻松地在悬停开/关状态之间切换。我的问题是不确定我的css出现了css类＃whatIS1031＃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上的代码
这是我在精品店http://s1287.beta.photobucket.com/user/debuggingfool/media/nav_zps03a73d67.png.html

上的精灵副本

Answer 1

此项目的所有HTML和CSS值得进行彻底改革，但以下是您具体问题的答案：

whatIS1031未显示。元素的ID有一个大写'S'（whatIS1031），而CSS选择器有一个小写的''（whatIs1031）。
howToStart未显示，因为background:url()的第一个CSS声明中缺少它。相反，#h-howToStart会出现两次。

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

Answer 2

除了这里提到的特定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的大小都相同，则不必单独为每个ID分配元素大小。只需使用 -

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

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

2 个答案: