Question

使用Bootstrap 3时，我试图弄清楚当导航栏崩溃时如何在.navbar-default .navbar-nav > li > a:hover上触发类/样式更改。

当导航栏完全展开时，我希望在鼠标悬停时更改边框颜色。当导航栏折叠时，我希望在鼠标悬停时更改背景颜色（在下拉列表中）。

我认为触发导航栏崩溃的任何事情都可以切换课程，但我无法找到这种情况。

这是否可以使bootstrap触发样式更改，还是需要编写自定义函数？关于如何实现这一目标的任何其他建议？

干杯。

Answer 1

您可以在CSS中使用媒体查询执行此操作。 jsFiddle Demo

// 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链接没有边框，因此添加一个可能会导致导航栏的大小发生变化。
当导航栏折叠时，它适用于移动设备，因此＆＃34; Hover＆＃34;并非真正适用于（触控）移动设备。我的意思是，您经常在桌面上使用宽度小于768像素的浏览器窗口吗？

Answer 2

了解您在移动设备中悬停的内容。但是，有时您会使浏览器窗口变小，在这种情况下，折叠的导航栏会显示不适合小菜单的内容。我还在试图弄清楚如何在不使用媒体查询的情况下实现这一目标。在我的情况下，我正在尝试删除我在悬停时使用的FontAwesome图标。我很乐意听到建议。

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

2 个答案: