我正在尝试练习图像替换技术,主要用于导航目的。我似乎无法弄清楚为什么它不起作用。悬停有效,但默认菜单项无效。我很确定事情写得正确。
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;
}
最佳答案
首先,您在那里写的一个选择器与我在网站上看到的不匹配:#nav li a
在您的网站上是 #nav li
。
其次,您需要注意 CSS 选择器的特殊性:
#nav li
将否决:
#process
但是:
#nav #process
不会被否决。
您可以在这里找到一篇关于特异性的非常好的文章:http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
关于css - 为什么这种图像替换技术不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12935640/