图像导航栏悬停

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的孩子。它应该是nav li a#home:hover{}等。

您还需要在标签上设置块或内联块以及宽度/高度。

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

Answer 2

您需要像这样解决：

nav li a#home { ... }
nav li a#home:hover { ... }

Answer 3

您需要关闭a代码并添加内容：<a href='' id='home' />some text</a>

您还应将a显示为块或内联块，并为其指定宽度和高度，以便您的背景图像能够按预期显示。

另外，你的选择器错了。通过说a #home，您正在寻找“ ID为home的任何元素，这是[{1}} ”的后代元素。您的HTML中不存在哪些内容。相反，您可以使用a来定位它，这意味着“ a#home <{1}}元素，其ID为a ”。