Question

我有一个菜单，我正在模仿旧的磁带卡座。每个列表项都有一个按钮的背景图像。选择项目后，新的背景图像会将按钮显示在向下位置。但是，我仍然可以看到下面的其他图像。如何将原始图像替换为所选图像。请参阅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)
}

Answer 1

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

为了改善这一点，我还将按钮的上下版本组合成一个图像，以创建所谓的CSS精灵。然后，当您想要将按钮切换到向下位置时，您需要做的就是调整background-position。

Answer 2

a标记上有一个图像，li标记上有一个图像，所以当页面转到您点击的链接时，您应该更改同一标记上的图像之前是开启的，而不是在另一个标签上添加它。这两个标签都应该可以使用，您只需要选择一个。

Answer 3

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

替换李背景图像

3 个答案: