在自定义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类统一起来的尝试失败了。感谢您在这方面的帮助。谢谢
最合适的回答,由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 );
}