css - 在 Flexdashboard 中更改激活页面的颜色

Question

我的 flexdashboard 有问题。我想将具有多个页面的仪表板的导航栏颜色更改为灰色(我成功了)，并将事件/选定页面或我悬停的页面的颜色更改为黄色(我不能这样做)。这是我使用的代码。我不确定如何找到可以更改的导航栏元素的名称，以便更改导航栏。

---
title: "Example"
output: 
  flexdashboard::flex_dashboard:
    vertical_layout: fill
---
<style>                     
.navbar {
  background-color:grey;
  hover-color:yellow;
}

</style> 

背景变成灰色(就像我希望的那样)，但是我悬停在上面的选定页面或页面保持蓝色。有谁知道如何处理这个问题？非常感谢!

Answer 1

这会很棘手，因为您必须覆盖所有控制悬停颜色的 css 元素。一个简单的解决方法是更改​​主题:

---
title: "Example"
output: 
  flexdashboard::flex_dashboard:
    vertical_layout: fill
    theme: <enter theme name>
---

主题可以在 flexdashboard site 上找到.

我也需要做一些类似的事情，我想我发现了大部分需要改变的元素:

<style>
.navbar {
  background-color:grey;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    background-color: yellow;
    color: white;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: white;
  background-color: yellow;
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
  background-color: yellow;
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
  border-color: yellow;
}
</style>

您可以在此处找到需要更改的导航栏元素:https://github.com/thomaspark/bootswatch/blob/v3.3.5/cosmo/bootstrap.css#L4643-L4744