0

我正在为 Wordpress 主题皮肤 Bootstrap 2.0.1，它使用 Twitter 的引导程序 v2.3.2，并且我试图找出如何在折叠的导航项中更改可见的下拉文本项的颜色（链接）导航已被点击打开。

我知道如何通过 variables.less 文件（@navbarText、@navbarLinkColor、@navbarLinkColorHover 等）更改导航下拉项的文本/背景颜色

让我难过的是在以下情况下更改文本项的颜色：

  • 调整窗口大小，以便折叠响应式导航。
  • 单击导航切换按钮以显示先前隐藏的导航项。
  • 单击打开菜单链接以显示响应格式的下拉菜单项。

这就是我的意思，使用修改后的 Bootstrap 的默认示例之一来说明问题：

<!-- NAVBAR -->
<div class="navbar navbar-fixed-top">

<div class="navbar-inner">

<div class="container">

<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>

<a class="brand" href="#">Site Title</a>

<div class="nav-collapse collapse navbar-collapse">

<ul class="nav">

<li class="active"><a href="#">Home</a></li>

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Fruits <b class="caret"></b></a>

<ul class="dropdown-menu">

<li><a href="#">Strawberries</a></li>
<li><a href="#">Bananas</a></li>
<li><a href="#">Apples</a></li>

</ul>

</li>

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Vegetables <b class="caret"></b></a>

<ul class="dropdown-menu">

<li><a href="#">Celery</a></li>
<li><a href="#">Cabbage</a></li>
<li><a href="#">Cucumbers</a></li>

</ul>

</li>

</ul>


<form class="navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form>

</div><!-- /.nav-collapse -->

</div>

</div><!-- /navbar-inner -->

</div><!-- /navbar -->

<!-- NAVBAR -->

问题是子类别链接（草莓、香蕉、苹果或芹菜、卷心菜、黄瓜）的初始颜色，当导航由于浏览器窗口的大小调整而崩溃并且主要类别（水果、蔬菜）已被单击以显示他们。

我可以在悬停时在响应模式下设置展开下拉项的背景/文本颜色。

我似乎无法更改的是响应模式下的下拉文本项最初的默认浅灰色。

常规响应式导航和反向导航中的下拉项目使用相同的浅灰色文本颜色。它不会改变。

我希望能够将该颜色更改为其他颜色，但我还没有找到解决方案。

感谢您提供的任何帮助。

4

1 回答 1

1

我认为你的问题是可以理解的，因为你想改变悬停的背景颜色以及下拉菜单中的活动元素......

以最简单的方式，您可以简单地将元素调用到一个单独的文件中hover，active并使用您的自定义颜色进行定义...

在悬停和活动时定义背景颜色的类如下：-

//For active  states
.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus
{ background-color:#f00; //Your Pick }

//For hovering states
.nav-collapse .nav > li > a:hover, .nav-collapse .nav > li > a:focus, .nav-collapse .dropdown-menu a:hover, .nav-collapse .dropdown-menu a:focus
{ background-color:#bbb; //Your Pick }

查看我的演示以获取更多参考：- http://jsfiddle.net/y7bev/3/

希望这对你更好......

谢谢...

于 2013-06-20T04:51:21.317 回答