0

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

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

2 回答 2

2

首先，您在那里编写的选择器之一与我在网站上看到的不匹配：#nav li a在#nav li您的网站上。

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

#nav li

将否决：

#process

但：

#nav #process

不会被否决。

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

于 2012-10-17T13:50:24.110 回答
0

我将包括：

#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');

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

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

等功能和其他...

如果我遗漏了任何内容或您有任何问题，请在评论中包含。

于 2012-10-17T14:18:01.547 回答