每个列表项目导航的不同背景图像？

Question

我想将图像用于导航名称，并在悬停时更改每个菜单项的图像。这样做的最佳方法是什么？一个例子就是很棒。每个列表项都有自己的正常，活动和鼠标悬停的图像。

我正在尝试使菜单名称看起来像是在鼠标悬停时被推入。

Answer 1

使用css很容易，只需将：悬停在要更改的元素之后。 我没有尝试代码就做了一个非常快速的例子，所以如果它不起作用我会很抱歉，但你会得到漂移。

HTML：

<ul>
<li class="link1"><a>Link 1</a></li>
<li class="link2"><a>Link 2</a></li>
<ul>

CSS：

li.link1 {
background: url('img/link1_normal.png');
}

li.link1:hover {
background: url('img/link1_hover.png');
}


li.link2 {
background: url('img/link2_normal.png');
}

li.link2:hover {
background: url('img/link2_hover.png');
}

Answer 2

我为你准备了这个jsfiddle。它涉及background-image属性和：hover和：active css选择器。您可以阅读here。

虽然出于性能原因，虽然你在sprites上阅读而不是使用单独的图片，但建议这样做。