javascript - 我如何更改 Bootstrap 导航栏悬停

标签 javascript jquery html css twitter-bootstrap

我如何编辑它才能看到导航栏选项。目前它与背景颜色相同。我想将之前的字体更改为白色,并在它悬停到白色背景和蓝色字体时更改它们。

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<nav class="navbar navbar-dark bg-primary navbar-fixed-top " role="navigation">
  <div class="container">
    <div class="navbar-header">
      <div class="tog" style="padding-top:7px; ">
        <a href="#menu-toggle" class="btn btn-default btn-sm" id="menu-toggle"> <span class="glyphicon glyphicon-eye-open"></span> 
        </a>
      </div>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-nav">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse" id="top-nav">
      <ul class="nav navbar-nav">
        <li><a href="#"><i class="fa fa-home"></i> Home</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><i class="fa fa-suitcase"></i><span class="glyphicon glyphicon-envelope"> </span></a>
        </li>
        <li><a href="#"><i class="fa fa-suitcase"></i><span class="	glyphicon glyphicon-bell"> </span></a>
        </li>

        <li class="dropdown">
          <a href="#" class="dropdown-toggle profile-image" data-toggle="dropdown">
            <img src="http://placehold.it/30x30" class="img-circle special-img">xxx <b class="caret"></b>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#"><i class="fa fa-cog"></i> Account</a>
            </li>
            <li class="divider"></li>
            <li><a href="#"><i class="fa fa-sign-out"></i> Sign-out</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

最佳答案

转到您下载的 bootstrap.css 文件并在第 4489 行附近进行更改..

改变这个选择器的CSS

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    color: #333;
    background-color: transparent;
}

关于javascript - 我如何更改 Bootstrap 导航栏悬停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37370790/

相关文章:

Javascript 仅在接下来的工作日使用 - 忽略周末

javascript - 将字符串转换为标题大小写,但文章除外(a、an、the..etc)

javascript - 如何将 onclick 事件附加到 vuejs "v-for="生成的每个项目以显示或隐藏其内部元素

javascript - 在 unslider.js 中设置 true 或 false

javascript - 比较两个对象数组并合并缺失的对象

Jquery Jsonp : Request failed: parsererror in Internet Explorer 9 and below

html - 带有 CSS 下拉菜单的联系表单 - 无响应

html - 以大背景为中心的问题

html - 捕捉视频 HTML5 播放/停止事件

javascript - 放下第二个元素后返回元素