부트 스트랩 4 말대꾸 두 그라데이션 색상이 나에게 내가 함께 4 네비게이션 바 부트 스트랩 만든</p> <p>도움이, 내가 모든 솔루션을 찾을 클라우드 링크가

Question

내가 말대꾸 정말 새로운 해요 작동하지 않는 마우스를 가져 가면 내가 이것에 대한 많은 검색이 NAVBAR하기 그라디언트 배경 및 그라디언트 navbar 해당 링크를 완벽하게 및 다시 그라디언트 글꼴 색을 추가 할 : 해당 작업을 가리키면 있지만 그라디언트 배경색을 추가 할 경우 : hover 작동하지 않는 경우에만 '배경'링크 배경 색 그라데이션을 표시하지만 않습니다. '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>) 텍스트에이 기울기를 설정하고되지 않은 것이 었습니다.