R Shiny中navbarPage菜单栏鼠标悬停字体颜色修改失败求助

我帮你分析下问题所在，以及怎么快速修复：

核心原因：选择器没命中正确元素 #

你写的.navbar-default:hover是给整个导航栏容器加hover样式，但实际上你要修改的是导航栏里的菜单项文本的悬停效果——这个元素的层级更深，原选择器根本没选中目标。

另外，Shiny默认用的Bootstrap样式本身就有菜单项的hover规则，即使你加了!important，如果选择器不够具体，也会被自带样式覆盖。

修复方案：用精准的CSS选择器 #

你需要把选择器定位到菜单项的链接标签上，试试下面的CSS代码：

/* 针对navbarPage的一级菜单项悬停样式 */
.navbar-default .navbar-nav > li > a:hover {
  color: #F2E836 !important; /* 悬停时的字体颜色 */
  background-color: #000000 !important; /* 悬停时的背景色 */
}

/* 如果你的导航栏有下拉子菜单，加上这段来修改子项的悬停效果 */
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
  color: #F2E836 !important;
  background-color: #000000 !important;
}

在Shiny里正确引入CSS的示例 #

把这段CSS放到Shiny的UI里，用tags$head(tags$style(HTML(...)))包裹：

library(shiny)

ui <- navbarPage(
  "我的Shiny应用",
  tabPanel("首页"),
  tabPanel("数据展示"),
  tabPanel("设置"),
  # 插入自定义样式
  tags$head(
    tags$style(HTML("
      .navbar-default .navbar-nav > li > a:hover {
        color: #F2E836 !important;
        background-color: #000000 !important;
      }
      /* 下拉子菜单的悬停样式（可选） */
      .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
        color: #F2E836 !important;
        background-color: #000000 !important;
      }
    "))
  )
)

server <- function(input, output) {}

shinyApp(ui, server)

这样修改后，鼠标悬停在导航菜单项上时，字体颜色和背景色就会按照你的设置生效了。

内容的提问来源于stack exchange，提问作者user9750056