CSS：导航菜单上的 SVG 在选择选项卡时更改（活动）答案

【问题标题】：CSS: SVGs at the navigation menu to change when the tab is selected(active)CSS：导航菜单上的 SVG 在选择选项卡时更改（活动）
【发布时间】：2017-08-03 16:36:08
【问题描述】：

我的耐心已经结束，需要就此案寻求一些帮助。我正在尝试让它工作 - 当我在菜单中打开选项卡时，所选选项卡的默认 svg(black) 图标需要替换为另一个 svg(white)。

#menu a .main-menu-icon {
display:inline-block;
width:22px;
height:21px;
line-height:40px;    
margin-right:7px;
background: url(/images/digital.svg);
}
__________________________________________________________
#menu .nav-tabs>li>a.menu_digital>.main-menu-icon{
background: url(/images/digital.svg);
}
#menu .nav-tabs>li>a.menu_digital:active>.main-menu-icon {
background: url(/images/digital_white.svg);
}

在那种情况下（可能很愚蠢），只有当我直接按住它时，svg才会更改（变为白色），释放按钮后，无论我在标签页中，默认svg（黑色) 返回。

谢谢。祝你今天过得愉快。 :)

【问题讨论】：

你能提供你的 html 和 javascript 代码吗？你用什么标签
在这种情况下我不能使用 JS（不取决于我 - 没有获得使用它的批准；仅限 css）。

标签： css svg menu css-selectors

【解决方案1】：

您问题中的 CSS 包含

#menu .nav-tabs>li>a.menu_digital:active>.main-menu-icon {
  background: url(/images/digital_white.svg);
}

选择器包含:active，因此仅适用于按下时的菜单项。加载预期页面时，单击的菜单项可能会有一个 class active（取决于 CMS），因此您需要将其添加到您的选择器列表中（注意区别 :与.)：

#menu .nav-tabs>li>a.menu_digital:active>.main-menu-icon,
#menu .nav-tabs>li>a.menu_digital.active>.main-menu-icon {
  background: url(/images/digital_white.svg);
}

【讨论】：