Bootstrap - 如何仅从折叠的导航栏中删除悬停效果？

Question

我有一个带导航栏的页面，其中每个链接都滚动到页面中的某个部分。我有一个像下面这样的悬停动画：

.navbar-default .navbar-nav li a:hover,
.navbar-default .navbar-nav li a:active {
    box-shadow: 0 4px 0px 0px #62c4a4;
}

这是bootstrap默认悬停动画的补充，使文本更暗。代码笔中有一个演示http://codepen.io/meek/pen/NNprYb

在较小的设备上，当折叠列表展开时，蓝色的盒子阴影悬停也会触发。但是我不希望它在折叠列表锚点中触发，因为引导默认悬停css就足够了。

如何停止在展开的导航栏上显示悬停效果？

Answer 1

您可以使用CSS媒体查询来定义按钮在不同设备尺寸上的显示方式。

例如，在此特定情况下，删除折叠的导航项上的边框阴影：

@media (max-width: 768px) {

 .navbar-default .navbar-nav li a:hover, 
 .navbar-default .navbar-nav li a:active, 
 .navbar-default .navbar-nav > .active > a,
 .navbar-default .navbar-nav > .active > a:hover, 
 .navbar-default .navbar-nav > .active > a:focus {
        box-shadow: none;
 }

}