Bootstrap 3-改变导航栏崩溃的悬停样式？

Question

使用Bootstrap3，我试图找出如何触发上的类/样式更改。导航栏默认值。导航条导航

当导航栏完全展开时，我希望鼠标悬停时边框颜色改变。当导航栏折叠时，我希望鼠标悬停时背景颜色（在下拉菜单中）发生变化。

我在想无论是什么触发了导航条崩溃，都可以切换类，但是我找不到这是在哪里发生的。

这是否可能使引导触发样式更改，或者我需要编写自定义函数？关于如何实现这一点，还有其他建议吗？

干杯




Answer 1

让你说的关于移动悬停有意义。然而，有时你会使你的浏览器窗口变小，在这种情况下，折叠的导航栏会显示不适合小菜单的内容。我仍在试图找出如何在不使用媒体查询的情况下实现这一点。在我的情况下，我试图删除我在悬停时使用的FontAw0013图标。我很高兴听到建议。

Answer 2

您可以通过CSS中的媒体查询来实现这一点。JSFIDLE演示

// Navbar expanded
@media (min-width: 768px){
    .navbar-default .navbar-nav > li > a:hover{
        border: 1px solid red;
    }
}

//Navbar collapsed
@media (max-width: 768px){
    .navbar-default .navbar-nav > li > a:hover{
        background-color: red;
    }
}

但是有一些问题...

• navbav-nav链接没有边框，所以添加一个可能会导致导航栏的大小发生变化。
• 当导航栏折叠时，它是为移动设备准备的，所以“悬停”并不真正适用于（触摸）移动设备。我是说，你多久使用一次桌面上小于768px宽的浏览器窗口？