我在链接上添加了悬停样式,但我不会在我的事件类中添加它。
<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/
您知道如何“禁用”事件链接上的此悬停吗?
最佳答案
从 .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
关于css - 禁用事件链接上的 CSS 悬停效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24725935/