使用精灵进行水平导航

Question

我有以下代码，我不确定为什么当我对第一个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; }

Answer 1

问题在于#navA a:hover选择器中的声明。试试这个：

#navA a:hover 
{ 
    background: url("../images/mainNav.gif") no-repeat 0px -49px; 
}