hover时更改颜色以及折叠导航栏切换时的颜色？
我正在尝试重拍这个： https ： //www.w3schools.com/bootstrap/bootstrap_theme_company.asp
问题是，我不想只复制这个例子，我想通过改变某些部分（在首先100％重新制作它之后）来实现它。
这是最终结果： https ： //www.w3schools.com/bootstrap/trybs_theme_company_full.htm#myPage
如果您尝试缩小页面，您将看到导航栏更改为您可以单击的按钮（由彼此顶部的3个图标栏组成）。 现在我想更改此按钮，因此它具有以下特征：
- 如果你将鼠标hover在它上面，背景应该变成白色，3个图标条应该变成橙色;
- 如果单击按钮，背景应变为白色，3个图标条应变为橙色。 所以我想要的是，当导航栏折叠时，应该有这种橙色/白色配色方案。 如果它没有折叠它应该恢复正常（除非它已经徘徊）
问题是，我没有尝试过任何工作。
这是我的相关html：
这是我的相关cs：
.navbar { margin-bottom: 0; background-color: #f4511e; z-index: 9999; border: 0; font-family: Montserrat, sans-serif; font-size: 12px !important; letter-spacing: 4px; border-radius: 0; } .navbar li a, .navbar .navbar-brand { color: #FFFFFF !important; } .navbar-nav li a:hover, .navbar-nav li.active a { color: #f4511e !important; background-color: #FFFFFF !important; } .navbar-default .navbar-toggle { border-color: transparent; color: #ffffff; } .navbar-toggle:hover { background: white !important; color: #F4511e !important; } .navbar-toggle:focus { background: white !important; color: #F4511e !important; } .navbar-toggle:hover .icon-bar { background: #F4511e !important; } .navbar-toggle:focus .icon-bar { background: #F4511e !important; } .navbar-toggle .icon-bar { background: white !important; }
我遇到的一个大问题是焦点不能达到我想要的效果，因为当我单击按钮然后单击其他位置时，它会变回其标准配色方案。 我理解为什么，因为它不再活跃而且没有被徘徊。
所以我需要像焦点一样思考，但这与导航栏被折叠或不相关联。 你们有任何想法如何实现这一目标吗？
在互联网上搜索后，我发现了这个问题： 如何在点击导航切换时更改导航栏颜色
这和我的问题差不多，但我真的不明白Alaksandar Jesus Gene做了什么，我无法让它发挥作用。 有人可以解释他做了什么（见下文）并帮助我理解我应该改变什么才能使它在我自己的例子中起作用？
解决方案代码，我不太明白：
.navbar-yellow{ background-color: yellow !important; }
$(".navbar-toggle").click(function(){ $("nav").toggleClass("navbar-yellow"); })
非常感谢任何帮助/想法。
提前致谢，
您可以在按钮上使用.toggleClass（） 。
我给了按钮一个id并用jQuery选中它。 单击该按钮后，将该类添加到该按钮。 在CSS中，根据需要设置此类的样式。
小提琴
$(function() { var hamburger = document.getElementById('hamburger'); $(hamburger).click(function() { $(this).toggleClass('is-active'); }) })
.navbar { margin-bottom: 0; background-color: #f4511e !important; z-index: 9999; border: 0; font-family: Montserrat, sans-serif; font-size: 12px !important; letter-spacing: 4px; border-radius: 0; } .navbar li a, .navbar .navbar-brand { color: #FFFFFF !important; } .navbar-nav li a:hover, .navbar-nav li.active a { color: #f4511e !important; background-color: #FFFFFF !important; } .navbar-default .navbar-toggle { border-color: transparent; color: #ffffff; } #hamburger .icon-bar { background: white; } #hamburger:hover, #hamburger.is-active { background: white !important; } #hamburger:hover .icon-bar, #hamburger.is-active .icon-bar { background: #F4511e !important; } #hamburger:focus { background: #F4511e; } #hamburger:focus .icon-bar { background: #FFF; }
好的，这是这个片段的细分：
$(".navbar-toggle").click(function(){ $("nav").toggleClass("navbar-yellow"); })