在活动链接上禁用 CSS 悬停效果

Posted

技术标签:

【中文标题】在活动链接上禁用 CSS 悬停效果【英文标题】:Disable CSS hover effects on active link 【发布时间】:2014-09-03 17:51:16 【问题描述】:

我在链接上添加了悬停样式,但我不会在我的活动课程中使用它。

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

我的 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;

你可以在这里查看:http://jsfiddle.net/nsCP4/

您知道如何在活动链接上“禁用”此悬停吗?

【问题讨论】:

【参考方案1】:

从 .active 类中移除border-bottom:。并将.primary_nav li:hover 更改为.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;

见fiddle

【讨论】:

问题是我需要将边框底部保持在我的默认状态以获取活动链接。 @AntoinePlu:查看我的更改和演示。【参考方案2】:

active 类添加到li 而不是&lt;a&gt; 标记,并在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;    

查看Demo

【讨论】:

以上是关于在活动链接上禁用 CSS 悬停效果的主要内容,如果未能解决你的问题,请参考以下文章

CSS CSS Anchor基本样式(a:链接,活动,访问,悬停)

如何从活动导航链接中删除悬停时不必要的附加下划线?

如何为 Tailwindcss 全局更改默认、活动和悬停状态的链接颜色?

CSS:返回后悬停状态保持活动状态(Firefox)

如何禁用链接的引导悬停颜色?

Share Code | Javascript & HTML & CSS链接悬停显示图像效果