在活动链接上禁用 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
而不是<a>
标记,并在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:链接,活动,访问,悬停)