替换 li 背景图片答案

【问题标题】：replacing li background image替换 li 背景图片
【发布时间】：2013-02-12 12:29:24
【问题描述】：

我有一个模仿旧磁带机的菜单。每个列表项都有一个按钮的背景图像。选择项目时，新的背景图像显示在下降位置的按钮。但是，我仍然可以看到下面的另一张图片。如何将原始图像替换为所选图像。请参阅http://www.saintalvia.com 了解我的意思。

谢谢！

#access a { 
font-family:Roboto;
text-transform:uppercase;
font-size:12px;
padding: 0 9px 2px 9px;
-moz-border-radius:0 0 0 0 !important;
-webkit-border-radius:0 !important;
-webkit-border-radius:0 !important;
border-radius:0 !important;
border-radius:0 !important;
}

#access .menu-header li,
div.menu li {
margin-top:0px;
height:80px;
}

#access ul li {
margin-right:8px;
background-repeat:no-repeat;
background-position:bottom;
background-image:url(http://www.saintalvia.com/wp-content/uploads/2013/02/newButton.png);
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access li.selected > a,
#access ul li.current-menu-parent > a,
#access ul li.current_page_item > a:hover,
#access ul li.current-menu-item > a:hover {
height:80px;
background-color:transparent;
background-repeat:no-repeat;
background-position:bottom;
background-image:url(http://www.saintalvia.com/wp-content/uploads/2013/02/buttonDownNew.png)
}

【问题讨论】：

标签： css list menu selecteditem

【解决方案1】：

<li> 上设置了“向上”图像，<a> 上设置了向下图像。将当前的<li> 设置为向下，而不是<a>

为了改进这一点，我还将按钮的向上和向下版本组合到一个图像中，以创建所谓的 CSS 精灵。然后，当您想将按钮移至向下位置时，您只需调整background-position。

【讨论】：

谢谢你现在工作得很好！是的，你是对的。精灵是个好主意

【解决方案2】：

您在a 标签上有一张图片，在li 标签上有一张图片，因此当页面转到您点击的链接时，您应该更改之前所在标签上的图片，不要将其添加到另一个标签的顶部。任何一个标签都应该可以工作，你只需要选择一个。

【讨论】：

【解决方案3】：

看起来li 具有向上按钮的背景，li a 具有向下按钮背景。

【讨论】：