更改Bootstrap导航栏样式

我试图用JavaScript更改Bootstrap导航栏的样式，但我不知道它是如何工作的。我可以使用CSS轻松更改样式，但不能使用JavaScript。更改Bootstrap导航栏样式

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 

    <a href="#" class="navbar-brand">HOME</a> 
    </div> 
     <div class="collapse navbar-collapse" id="bs-nav-demo"> 
      <ul class="nav navbar-nav"> 
       <li><a href="#">-</a></li> 
       <li><a href="#">-</a></li> 
       <li><a href="#">-</a></li> 
       <li><a href="#">-</a></li> 
       <li><a href="#">-</a></li> 
       <li><a href="#">-</a></li> 
       <li><a href="#">-</a></li> 
      </ul> 
    </div> 
</nav>

我想改变颜色，当li盘旋，品牌元素的颜色和导航栏的border-bottom。我能做什么？

来源

2017-07-26 DominikN

请张贴的CSS和你说的JavaScript你尝试过这样的人可以帮你。 – Syfer

我的CSS已经在工作，但我还没有开始编写JavaScript代码，因为我不知道要改变样式。我只知道如何使用document.getElementByID或类名或标记名来更改单个元素。但这不适用于Bootstra – DominikN

这是我的CSS：我不知道如何在Stack Oveflow中正确地对它进行加密。 .navbar-default .navbar-nav> li> a颜色：＃373f43; padding-left：12px; padding-right：12px; 过渡：全部缓解0.3s; } .navbar-default .navbar-nav> li> a：hover { color：＃F33939; } .navbar-default .navbar-brand { color：＃373f43; 过渡：全部缓解0.3s; } .navbar-default .navbar-brand：hover { color：＃F33939; } .navbar-default { border-bottom：2px solid＃F33939; } – DominikN

这是您开始使用的基本示例。你应该能够适应你的代码。

$("li").hover(
 
    function() { 
 
    $(this).addClass('hover'); 
 
    }, 
 
    function() { 
 
    $(this).removeClass('hover'); 
 
    } 
 
);

.hover{color:green; 
 
font-size: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
 
<ul> 
 
    <li>Milk</li> 
 
    <li>Bread</li> 
 
    <li>Chips</li> 
 
    <li>Socks</li> 
 
    </ul>

干杯

来源

2017-07-27 08:43:15 Syfer

此代码有效，但有一点。字体大小已更改，但不是颜色。 – DominikN

是的，这是你可以做的一个例子。你原来的帖子中没有多少东西可以继续。如果你看看什么是基于jQuery的悬停改变的CSS。 – Syfer

好吧，我会尽你所能的代码尽我所能。谢谢 – DominikN

更改Bootstrap导航栏样式

回答

相关问题