CODEWITHSUNDEEP
cssclasshyperlinkhover
AntoinePlu
AntoinePlu

Reputation: 55

Disable CSS hover effects on active link

I've added a hover style on my links but I wouldn't have it on my active class.

<nav>
<ul class="primary_nav">
    <li><a href="#" class="nav-link active">Stream</a></li>
    <li><a href="#" class="nav-link">Playlists</a></li>
    <li><a href="#" class="nav-link">Likes</a></li>
</ul>
</nav>

My CSS :

.nav-link { /* Link default style */
    color: #dedede;
    font-size:1em;
    font-weight: 400;
    text-decoration: none;
}

.primary_nav .active { /* Add this class for active page */
    @extend .nav-link;

    color: #333;
    border-bottom: 3px solid #FF6D00;
    padding-bottom: 16px;
}

.primary_nav li:hover {
    border-bottom: 3px solid #FF6D00;
    padding-bottom: 16px;
}

You can check it here : http://jsfiddle.net/nsCP4/

Do you have an idea how can I "disable" this hover on my active link ?

Upvotes: 2

Views: 8166

Answers (2)

Jim
Jim

Reputation: 586

Remove border-bottom: from the .active class. And change .primary_nav li:hover to .nav-link:hover.

nav {
    height: 40px;
    border-bottom: 1px solid #EEE; /* Grey divide 1px Horizontale */
    font-family: 'Open Sans', Helvetica, sans-serif;
}
.primary_nav li,
.user_nav li,
.nav-link {
    display: inline-block;
}

.primary_nav li {
    margin-right: 15px;
}

/* Link styles */

    .nav-link { /* Link default style */
        color: #dedede;
        font-size:1em;
        font-weight: 400;
        text-decoration: none;
    }

    .primary_nav .active { /* Add this class for active page */
         @extend .nav-link;

        color: #333;
        border-bottom: 3px solid #FF6D00;
        padding-bottom: 16px;
    }

.nav-link:hover {
    border-bottom: 3px solid #FF6D00;
    padding-bottom: 16px;
}

See fiddle

Upvotes: 1

amol
amol

Reputation: 1555

Add active class to li and not to <a> tag, and make the changes in css

<nav>
    <ul class="primary_nav">
        <li class="active"><a href="#" class="nav-link">Stream</a></li>
        <li><a href="#" class="nav-link">Playlists</a></li>
        <li><a href="#" class="nav-link">Likes</a></li>
    </ul>
</nav>

.primary_nav .active a{
    color: #333;    
}

Check this Demo

Upvotes: 1

Related Questions