使用精灵图来制作水平导航

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

- Cool Guy Yo

Answer 1

问题出在#navA a:hover选择器中的声明上。尝试这样做：

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

- Mario J Vargas

---

你应该将 #navA a 的宽度也设置好，否则在一些浏览器（几乎所有）中，由于链接的innerHTML为空，因此它没有宽度来渲染链接背景。 - khael

我通过复制您的代码使其工作，尽管我不确定我的代码和你的有什么区别，我就是看不出来。编辑：现在我明白了，如果将background-image替换为background，它就能工作了。 - Cool Guy Yo