在移动视图引导导航栏可折叠菜单需要不同的悬停和活跃的色彩

Question

悬停和聚焦效应不工作的移动视图

我在选择悬停颜色面临的问题和一类在导航栏的可折叠菜单保持活跃。我需要在移动视图中使用黑色的悬停效果，在桌面视图中使用不同的颜色。

我的桌面视图非常好，我只需要改变移动视图的悬停效果和主动效果。

@media only screen and (max-width: 767px) { 
 
.navbar-custom { 
 
    margin-top: -40px !important; 
 
    z-index: -1; 
 
} 
 
ul.nav.navbar-nav { 
 
    margin-top: 10px !important; 
 
} 
 
.collapsing, 
 
.in { 
 
    background-color: #CCCCCC; 
 
    text-align: center; 
 
} 
 
.collapsing ul>li>a, 
 
.in ul>li>a { 
 
    color: #FFFFFF!important; 
 
    text-shadow: #FFFFFF 0px 0px 0.5px!important; 
 
} 
 
    
 
.navbar-collapse>.navbar-nav>.active>a, 
 
.navbar-collapse>.navbar-nav>.active>a:hover, 
 
.navbar-collapse>.navbar-nav>.active>a:focus { 
 
    background-color: transparent; 
 
    color: black!important; 
 
    text-shadow: black 0px 0px 0.5px!important; 
 
} 
 
}

<nav class="navbar navbar-custom"> 
 
     <div class="container"> 
 
      <div class="collapse navbar-collapse" id="myNavbar"> 
 
       <ul class="nav navbar-nav"> 
 
        <li class="active"><a href="#">Home</a></li> 
 
        <li><a href="#">About Us</a></li> 
 
        <li><a href="#">Education</a></li> 
 
        <li><a href="#">Teachers</a></li> 
 
        <li><a href="#">Contact Us</a></li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </nav>

试过的东西打我的知识和达到，然后来到这里。

Answer 1

最后，我没有解决这个问题，是因为“z索引”所造成的问题。 实际上，不仅是悬停效果，而且整个菜单在移动视图中都不起作用，所以只显示。

此前我曾使用z-index在移动视图中隐藏元素额外的边距，这导致另一个图层覆盖它，导致菜单功能障碍。

我在这里附上我的更新CSS媒体查询

@media only screen and (max-width: 736px) { 
 
    .navbar-custom { 
 
     min-height: 0px; 
 
    } 
 
    .navbar-toggle { 
 
     margin-right: 0px; 
 
    } 
 
    .collapsing, 
 
    .in { 
 
     background-color: #CCCCCC; 
 
     text-align: center; 
 
    } 
 
    .collapsing ul>li>a, 
 
    .in ul>li>a { 
 
     color: #FFFFFF!important; 
 
     text-shadow: #FFFFFF 0px 0px 0.2px!important; 
 
    } 
 
    .navbar-collapse>.navbar-nav>.active>a, 
 
    .navbar-collapse>.navbar-nav>.active>a:hover, 
 
    .navbar-collapse>.navbar-nav>.active>a:focus { 
 
     background-color: transparent; 
 
     color: black!important; 
 
     text-shadow: black 0px 0px 0.2px!important; 
 
    } 
 
    .navbar-collapse>.navbar-nav>li>a:hover, 
 
    .navbar-collapse>.navbar-nav>li>a:focus { 
 
     background-color: transparent; 
 
     color: black !important; 
 
    } 
 
}

Answer 2

您必须编写里面，你的代码移动

@media only screen and (max-width: 500px) { 
    /* media screen styles*/ 
}