활성 링크에서 선형 그라디언트를 무시할 수 없습니다.

Question

간단한 CSS 전환을 추가 한 부트 스트랩 탐색 기능이 있습니다. 사용자가 링크 위로 마우스를 가져 가면 바로 닦아서 배경색을 파란색으로 바꿉니다. 사용자가 링크 페이지 .navactive에 있으면 <li> 클래스에 추가됩니다. 배경색이 파란색으로 표시되어 사용자가 해당 페이지에 있다는 것을 알게됩니다. 선형 그래디언트가이를 계속 유지합니다.

• 재정의 전환과 고체
• 클래스에 .navactive와 링크에 대한 전환을 해제 할 수있는 방법이

감사

.nav li { 
    /* Old browsers */ 
    background: linear-gradient(to right, #0943A7 50%, #FFFFFF 50%); 
    background-size: 200% 100%; 
    background-position: right bottom; 
    margin-left: 10px; 
    transition: all 1s ease; 
} 

.nav li:hover{ 
    background-position: left bottom; 
} 

.navactive { 
    background-color: #0943A7 !important; 
    overflow: hidden; 
    transform: skewX(-18deg); 
    -webkit-transform: skewX(-18deg); 
    -ms-transform: skewX(-18deg); 
} 

있는가

HTML :

<nav class="navbar navbar-expand-lg navbar-light bg-faded"> 
    <div class="container"> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="true" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <div class="collapse navbar-collapse show" id="navbarResponsive"> 
     <ul class="nav justify-content-center mx-md-auto"> 

     <li class="<?php echo ($page == "home" ? "nav-item navactive" : "nav-item")?>"> 
      <a class="nav-link" href="index.php">Home</a> 
     </li> 

     <li class="<?php echo ($page == "page2" ? "nav-item navactive" : "nav-item")?>"> 
      <a class="nav-link" href="#">Page 2</a> 
     </li> 

     </ul> 
    </div> 
    </div> 
</nav> 

Answer 1

두 가지가 여기에 일어나고 :

• CSS는 specificity을 .navactive에하는 .nav li
• background:~~~이 background-image을위한 속기, .nav li.navactive에 .navactive 규칙을 변경 background-image 재정의 background-color

입니다 낮은 다음이다 특이성을 돌봐야한다.

.navactive 규칙에 background-image:none;을 추가하면 background-color이 표시됩니다.

.nav li { 
 
    /* Old browsers */ 
 
    background: linear-gradient(to right, #0943A7 50%, #FFFFFF 50%); 
 
    background-size: 200% 100%; 
 
    background-position: right bottom; 
 
    margin-left: 10px; 
 
    transition: all 1s ease; 
 
} 
 

 
.nav li:hover{ 
 
    background-position: left bottom; 
 
} 
 

 
.nav li.navactive { 
 
    background-color: #0943A7 !important; 
 
    background-image:none; 
 
    overflow: hidden; 
 
    transform: skewX(-18deg); 
 
    -webkit-transform: skewX(-18deg); 
 
    -ms-transform: skewX(-18deg); 
 
}

<nav class="navbar navbar-expand-lg navbar-light bg-faded"> 
 
    <div class="container"> 
 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="true" aria-label="Toggle navigation"> 
 
     <span class="navbar-toggler-icon"></span> 
 
    </button> 
 
    <div class="collapse navbar-collapse show" id="navbarResponsive"> 
 
     <ul class="nav justify-content-center mx-md-auto"> 
 

 
     <li class="nav-item"> 
 
      <a class="nav-link" href="index.php">Home</a> 
 
     </li> 
 

 
     <li class="page2 nav-item navactive" > 
 
      <a class="nav-link" href="#">Page 2</a> 
 
     </li> 
 

 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

측면 노드에서

, 당신은 skewX 대신 font-style:italic을 사용할 수 있습니다.