Bootstrap 3 - 更改导航栏崩溃时的悬停样式？-Java 学习之路

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

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

我在想什么是触发导航栏崩溃可以切换课程，但我无法找到这种情况发生的地方 .

这是否可以使bootstrap触发样式更改，还是需要编写自定义函数？有关如何完成此任务的任何其他建议？

干杯 .

2 回答

4
您可以在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链接没有边框，因此添加一个可能会导致导航栏的大小发生变化 .
- 当导航栏折叠时，它适用于移动设备，因此"Hover"不适用于（触摸）移动设备 . 我的意思是，您经常在桌面上使用宽度小于768px的浏览器窗口吗？
回复于 2024-04-25T23:10:37+08:00
0

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

回复于 2024-04-25T23:10:37+08:00