sass - Bootstrap 4 sass 两种渐变颜色到导航栏链接悬停不起作用

Question

我真的是 sass 的新手，我已经搜索了很多关于这个我云没有找到任何解决方案，帮助我

我已经创建了带有渐变背景的 bootstrap 4 导航栏，渐变导航栏链接它的工作完美，我再次将渐变字体颜色添加到 a:hover 它的工作但是如果我将渐变背景颜色添加到 a:hover 它不起作用，只显示'a' 链接背景颜色渐变但不是 '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();
       } 
    } 
}

问题是您将此渐变设置为文本(在本例中为 <a>)而不是此文本的容器(<li>)。