html - 图像导航栏悬停

Question

我有一个显示图像链接列表的导航栏。我想根据悬停和选择更改图像。这是我的结果:

html:

<li>
    <a href='' id='home' />
</li>

CSS:

nav li {
    display: inline-block;
    width: 128px;
    height: 128px;
}

nav li a #home {
    background-image: url('../images/home.png');
}

nav li a:hover #home {
    background-image: url('../images/home-hover.png');
}

nav li a:selected #home {
    background-image: url('../images/home-selected.png');
}

为什么这不能正常工作？

Answer 1

您的 CSS 正在寻找 ID 为#home 的 child 。它应该是 nav li a#home:hover{} 等

您还需要在 a 标签上设置 block 或 inline-block 以及宽度/高度。

示例:http://jsfiddle.net/6HmLP/1/