【问题标题】:Change current page nav CSS更改当前页面导航 CSS
【发布时间】:2015-08-26 21:26:45
【问题描述】:

如何更改当前所在菜单项的文本颜色? 基本上,对于用户当前所在的页面,我需要将导航文本颜色设为白色。

背景颜色有效,但颜色无效。 .top-menu li.current-menu-item.current-menu-item 肯定会影响当前的背景颜色,但文本颜色不会改变。

  .ui.nav {
     background-color: transparent;
     border: medium none;
     height: 100px;
     margin-bottom: 3px;
     margin-right: 3%;
     float: right;
  }
  .ui.nav li:hover {
     color: red;
  }
  .ui.nav li {
     height: 100px;
     vertical-align:middle;
     transition: all .3s ease;
   }
  .ui.nav li:hover {
     background-color: #119BD7;
     transition: all .3s ease;
    }
  .ui.nav > li + li{
     border: none;
    }
  .ui.nav li a {
     color: #000;
     font-weight: bold;
     letter-spacing:1px;
     padding:0 10px;
     line-height: 100px;
     transition: all .3s ease;
   }
.ui.nav li:nth-child(1) {
     margin-left:24px;
   }
 .ui.nav li a:hover {
     color:#FFF;
     transition: all .3s ease;
    }
.top-menu li.current-menu-item. a.selected:link, a.selected:visited{
   color: #FFF !important;
     }
.top-menu li.current-menu-item.current-menu-item {
    background-color: #119BD7;
    color: #FFF !important;
    opacity: 1;
    }
.top-menu li.current-menu-item.current-menu-item:hover{
   background-color: #119BD7;
  color: #FFF !important;
 }

【问题讨论】:

  • 我们需要检查您的页面是否存在问题。有它的演示吗?

标签: css


【解决方案1】:

这解决了它。

  .top-menu li.current-menu-item.current-menu-item a {
     background-color: #119BD7;
     color: #FFF !important;
     opacity: 1;
   } 

【讨论】: