Question

我正在尝试练习图像替换技术，主要用于导航目的。我似乎无法弄清楚为什么它不起作用。悬停工作，但默认菜单项不起作用。我很确定事情写得正确。

http://lrroberts0122.github.com/DWS/practical/index.html

以下是导航的HTML：

<ul id="nav">
    <li id="process"><a href="index.html" id="active">Our Process</a></li>
    <li id="function"><a href="function.html">Bio-Built Function</a></li>
    <li id="future"><a href="future.html">The Future</a></li>
    <li id="engage"><a href="engage.html">Engage Dio</a></li>
</ul>

这是导航的CSS：

#nav {
    list-style: none;
    width: 244px;
    height: 124px;
    overflow: hidden;
    }

#nav li {
    float: left;
    }

#nav li a {
    width: 244px;
    height: 30px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    background: url('../img/bg_nav.png');
    }

#process {
    background-position: 0 0;
    }

#process:hover {
    background-position: -244px 0;
    }

#function {
    background-position: 0 -31px;
    }

#function:hover {
    background-position: -244px -31px;
    }

#future {
    background-position: 0 -60px;
    }

#future:hover {
    background-position: -244px -62px;
    }

#engage {
    background-position: 0 -90px;
    }

#engage:hover {
    background-position: -244px -93px;
    }

Answer 1

首先，您在此处撰写的其中一个选择器与我在网站上看到的内容不匹配：#nav li a在您的网站上为#nav li。

其次，你需要注意CSS选择器的特殊性：

#nav li

将推翻：

#process

但：

#nav #process

不会被否决。

你可以在这里找到一篇关于特异性的非常好的文章：http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 2

我会包括：

#nav li a {
    width: 244px;
    height: 30px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    background: url('../img/bg_nav.png');
    }

在#process中（顺便说一下，类可以更好地工作）

 #process {
        width: 244px;
        height: 30px;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        background: url('../img/bg_nav.png');

摆脱#nav li在CSS中的而不是HTML ，并试试这个：

 #process {
        width: 244px;
        height: 30px;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        background: url('../img/bg_nav.png');
        background-position: 0 0;
}

 #process:hover {
    background-position: -244px 0;
}

等功能＆amp;其他...

如果我遗漏了任何内容，或者如果您有任何疑问，请在评论中加入。

为什么这种图像替换技术不起作用？

2 个答案: