代码之家 › 专栏 › 技术社区 › Sam

引导4 sass两种渐变颜色到导航栏链接悬停不工作

bootstrap-4 gradient navbar hover sass

3

Sam · 技术社区 · 8 年前

我对sass真的很陌生,我已经为此进行了很多搜索,但我没有找到任何解决方案,请帮助我

我已经创建了带有渐变背景的bootstrap 4导航栏,渐变导航栏链接它工作得很好,我再次将渐变字体颜色添加到:hover它工作,但如果我将渐变背景颜色添加到: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

1 回复 | 直到 8 年前

1

0

Jordi Vicens 8 年前

试试这个代码,它对我有用。

.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> ).