更改导航栏合拢的悬停样式？

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

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

我在想任何触发导航栏崩溃都可以切换课程，但我无法找到发生的情况。

这可能使引导程序触发样式更改，还是我需要编写自定义函数？ 有关如何完成此任何其他建议？

干杯。

---

你可以在你的CSS中使用媒体查询来做到这一点。 jsFiddle演示

// 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链接没有边框，因此添加一个可能导致导航栏的大小发生变化。

当导航栏被折叠时，它适用于移动设备，因此“悬停”不适用于（触摸）移动设备。 我的意思是，您多长时间使用桌面上宽度小于768像素的浏览器窗口？

---

理解你在移动设备上悬停的内容。 但是，有时您会将浏览器窗口缩小一些，在这种情况下，折叠的导航栏会显示内容不适合用于小菜单。 我仍然试图找出如何实现这一点，而不使用媒体查询。 在我的情况下，我试图删除我在悬停时使用的FontAwesome图标。 我会很高兴听到建议。

链接地址: http://www.djcxy.com/p/83669.html

上一篇: Changing hover style on navbar collapse?

下一篇: Slide right to left?