我有以下代码,但是当我悬停在第一个navA上时,似乎没有任何变化,但我很确定它应该有变化,我被难住了。
HTML
<div id="access" role="navigation">
<ul>
<li id="navA"><a href="http://localhost:8888/fiftyfity/?page_id=2"></a></li>
<li id="navB"><a href="http://localhost:8888/fiftyfity/?page_id=9"></a></li>
<li id="navC"><a href="http://localhost:8888/fiftyfity/?page_id=11"></a></li>
<li id="navD"><a href="http://localhost:8888/fiftyfity/?page_id=13"></a></li>
</ul>
</div><!-- #access -->
CSS
#access {
background-image: url("../images/mainNav.gif");
width: 521px;
height: 49px;
margin: 0;
padding: 0;
}
#access li, #access a {
height: 49px;
display: block;
}
#access li {
float: left;
list-style: none;
display: inline;
text-indent: -9999em;
}
#navA { width: 98px; }
#navB { width: 131px; }
#navC { width: 123px; }
#navD { width: 138px; }
#navA a:hover { background-image: url("../images/mainNav.gif") 0px -49px no-repeat; }
#navA a
的宽度也设置好,否则在一些浏览器(几乎所有)中,由于链接的innerHTML为空,因此它没有宽度来渲染链接背景。 - khael