アクティブなリンクのリニアグラデーションを無効にすることはできません

Question

シンプルなCSSの移行を追加したブートストラップナビゲーションがあります。ユーザーがリンク上を移動すると、右にワイプして背景色を青に変えます。ユーザーがリンクページにあるときが<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オーバーライドbackground-color

が.nav li.navactiveへ.navactiveルールを変更し、background-imageの省略形ですTHEN低いです特異性の面倒を見なければならない。

background-image:none;を.navactiveに追加すると、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を使用する場合があります。