1

我为导航栏创建了一个精灵，以便通过 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上的代码这是我在 photobucket http://s1287.beta.photobucket.com/user/debuggingfool/media/nav_zps03a73d67
上的精灵的副本。 png.html

4

2 回答 2

3

该项目的所有 HTML 和 CSS 都值得大修，但这里是您特定问题的答案：

  • whatIS1031由于大写没有显示。元素的 ID 有一个大写的 'S' ( whatIS1031)，而 CSS 选择器有一个小写的 's' ( whatIs1031)。
  • howToStart没有出现，因为它在background:url(). 相反，#h-howToStart出现两次。

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

于 2013-01-09T18:37:11.760 回答
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 单独分配元素大小，如果它们的大小都相同的话。只需使用 -

.nav-button {
    background: url(http://i1287.photobucket.com/albums/a634/debuggingfool/nav_zps03a73d67.png) no-repeat;
    width:225px;
    height:30px;
}
于 2013-01-09T18:44:24.447 回答