使自定义菜单边栏图标在CSS中显示为当前

时间:2014-06-13 作者:Steve

在自定义WP菜单中,我为每个菜单项分配了不同的类。例如

.power-icon a {
    padding-left: 35px !important;
    background-image: url(/images/icon-grey.png);
    background-position:  5% 50% ;
    background-repeat: no-repeat;
 }

.power-icon a:hover {
    padding-left: 35px !important;
    background-image: url(/images/icon-blue.png);
    background-position:  5% 50% ;
    background-repeat: no-repeat;
 }
这很好,但是,我想在页面处于活动/当前状态时也显示蓝色图标。

我发现这个

      .widget_nav_menu .menu .current-menu-item {
             background-color: #f3f3f3;

      }
将突出显示当前项目背景。但我试图将其与icon类统一起来的尝试失败了。感谢您在这方面的帮助。谢谢

1 个回复
最合适的回答,由SO网友:Joey Yax 整理而成

这并不是WordPress特有的,但这里有。

真的,你所缺少的就是在.current-menu-item a.

/* Default state base */
.widget_nav_menu .menu li a{
  padding-left: 35px !important;
  background-position: 5% 50%;
  background-repeat: no-repeat;
}

/* Active state base */
.widget_nav_menu .menu .current-menu-item a,
.widget_nav_menu .menu .current-menu-item a,
.widget_nav_menu .menu .current-menu-parent a,
.widget_nav_menu .menu .current-menu-ancestor a {
  background-color: #f3f3f3;
}

/* Power */
.power-icon a {
  background-image: url( /images/icon-grey.png );
}

/* Power active + hover */
.power-icon a:hover,
.power-icon.current-menu-item a,
.power-icon.current-menu-parent a,
.power-icon.current-menu-ancestor a {
  background-image: url( /images/icon-blue.png );
}

结束

相关推荐

在特定页面上使用css类选择器

我试图将图像放置在几个项目符号列表旁边,这样全局默认设置在我的风格中就无法实现。子主题的css文件我的选择器是.活动img{此处编码;}然后在我正在应用它的页面上,我找到一个img标记,使其看起来像<img class=\"activities\" src\"linktoimage.png\"/> 刷新图像时,图像没有任何变化。我尝试使用ID而不是class,并将图像放在使用选择器的DIV中,但没有任何效果。我可能做错了,如果有任何帮助,我们将不胜感激。谢谢