ブートストラップ4つのSASS 2つのグラデーションの色は、私がSASS本当に新しいだと私は、任意の解決策を見つける私は、ブートストラップ4ナビゲーションバーを作成している私に</p> <p>を助けない曇らせるこのために多くのことを検索してい

Question

を働いていないホバーグラデーションの背景とグラデーションのnavbarは、その動作を完全にリンクしています。グラデーションのフォントの色を追加します：その動作をホバーしますが、グラデーションの背景色を追加した場合：そのホバリングは機能しません。 'a'フォントのグラデーション

ご協力いただきますようお願い申し上げます。

Expected result

Actual result

HTML

<nav class="navbar navbar-expand-sm"> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navBarItems" aria-controls="navbarText" 
     aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <div class="collapse navbar-collapse" id="navBarItems"> 
     <ul class="navbar-nav mr-auto"> 
      <li class="nav-item"> 
       <a href="" class="nav-link">Home</a> 
      </li> 
      <li class="nav-item"> 
       <a href="" class="nav-link">Books</a> 
      </li> 
      <li class="nav-item"> 
       <a href="" class="nav-link">Guest</a> 
      </li> 
      <li class="nav-item"> 
       <a href="" class="nav-link active">Contact us</a> 
      </li> 
     </ul> 
    </div> 
</nav> 

SASS

@mixin gold-gradient(){ 
background: rgb(249, 206, 112); 
background: -moz-linear-gradient(left, rgba(249, 206, 112, 1) 0%, rgba(197, 154, 38, 1) 50%, rgba(249, 206, 112, 1) 100%, rgba(123, 90, 0, 1) 100%); 
    background: -webkit-linear-gradient(left, rgba(249, 206, 112, 1) 0%, rgba(197, 154, 38, 1) 50%, rgba(249, 206, 112, 1) 100%, rgba(123, 90, 0, 1) 100%); 
    background: linear-gradient(to right, rgba(249, 206, 112, 1) 0%, rgba(197, 154, 38, 1) 50%, rgba(249, 206, 112, 1) 100%, rgba(123, 90, 0, 1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9ce70', endColorstr='#7b5a00', GradientType=1); 
} 

@mixin red-gradient($dir-1: left, 
$dir-2: right) { 
    background: rgb(153, 10, 34); 
    background: -moz-linear-gradient($dir-1, rgba(153, 10, 34, 1) 8%, rgba(200, 9, 54, 1) 50%, rgba(211, 31, 31, 1) 100%); 
    background: -webkit-linear-gradient($dir-1, rgba(153, 10, 34, 1) 8%, rgba(200, 9, 54, 1) 50%, rgba(211, 31, 31, 1) 100%); 
    background: linear-gradient(to $dir-2, rgba(153, 10, 34, 1) 8%, rgba(200, 9, 54, 1) 50%, rgba(211, 31, 31, 1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#990a22', endColorstr='#d31f1f', GradientType=1); 
} 

@mixin gold-text-gradient() { 
    background: rgb(249, 206, 112); 
    background: -moz-linear-gradient(left, rgba(249, 206, 112, 1) 0%, rgba(197, 154, 38, 1) 50%, rgba(249, 206, 112, 1) 100%, rgba(123, 90, 0, 1) 100%); 
    background: -webkit-linear-gradient(left, rgba(249, 206, 112, 1) 0%, rgba(197, 154, 38, 1) 50%, rgba(249, 206, 112, 1) 100%, rgba(123, 90, 0, 1) 100%); 
    background: linear-gradient(to right, rgba(249, 206, 112, 1) 0%, rgba(197, 154, 38, 1) 50%, rgba(249, 206, 112, 1) 100%, rgba(123, 90, 0, 1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9ce70', endColorstr='#7b5a00', GradientType=1); 
    background-clip: text; 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
} 

@mixin red-text-gradient() { 
    background: rgb(153, 10, 34); 
    background: -moz-linear-gradient(left, rgba(153, 10, 34, 1) 8%, rgba(200, 9, 54, 1) 50%, rgba(211, 31, 31, 1) 100%); 
    background: -webkit-linear-gradient(left, rgba(153, 10, 34, 1) 8%, rgba(200, 9, 54, 1) 50%, rgba(211, 31, 31, 1) 100%); 
    background: linear-gradient(to right, rgba(153, 10, 34, 1) 8%, rgba(200, 9, 54, 1) 50%, rgba(211, 31, 31, 1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#990a22', endColorstr='#d31f1f', GradientType=1); 
    background-clip: text; 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
} 

.navbar { 
    @include red-gradient(); 
    .navbar-nav li a { 
     @include gold-text-gradient; 
    } 
    .navbar-nav li a:hover { 
     @include red-text-gradient(); 
     @include gold-gradient(); 
    } 
} 

Codepen Demo

Answer 1

私はこのコードを試してみてください。

.navbar { 
    @include red-gradient(); 
    .navbar-nav li a { 
     @include gold-text-gradient; 
    } 

    .navbar-nav{ 
     a:hover { 
     @include red-text-gradient(); 
     } 
     li:hover{ 
     @include gold-gradient(); 
     } 
    } 
} 

問題

は、あなたがこのテキスト（ <li>）のコンテナに（この場合は <a>）テキストに、この勾配を設定していなかったということでした。