悬停时和导航栏切换折叠时更改颜色? [英] Change color on hover and when navbar-toggle is collapsed?
问题描述
我正在尝试重做此操作: https://www.w3schools.com/bootstrap/bootstrap_theme_company.asp
I am trying to remake this: https://www.w3schools.com/bootstrap/bootstrap_theme_company.asp
问题是，我不想仅复制此示例，而是想通过更改某些部分(在进行前100％的重新制作后)来制作自己的示例.
The thing is, I don't want to just copy this example, I want to make it my own by changing certain parts (after first 100% remaking it).
这是最终结果: https://www.w3schools.com/bootstrap/trybs_theme_company_full.htm#myPage
如果尝试缩小页面，则会看到导航栏变为可以单击的按钮(在彼此顶部由3个图标栏组成).现在，我想更改此按钮，使其具有以下特征:
If you try to make the page smaller, you will see that the navbar changes to a button (consisting of 3 icon-bars on top of eachother) that you can click. Now I want to change this button so it has the following characteristics:
- 如果将鼠标悬停在它上面，背景应该变成白色，而3个图标栏应该变成橙色；
- 如果单击该按钮，则背景应变为白色，而3个图标栏应变为橙色.所以我想要的是，导航栏折叠后应该具有这种橙色/白色配色方案.如果它还没有崩溃，它应该会恢复正常(除非它一直悬停在上面)
问题是，我没有尝试过.
The problem is, nothing I have tried works.
这是我相关的html:
Here is my relevant html:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#myPage">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">ABOUT</a></li>
<li><a href="#services">SERVICES</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#pricing">PRICING</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
这是我的相关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;
}
我遇到的最大问题是焦点无法实现我想要的功能，因为当我单击按钮然后在其他位置单击时，它会更改回其标准配色方案.我知道为什么，因为它不再活动并且没有被悬停.
The big problem I am having is that focus doesn't do what I want, because when I click the button and then click somewhere else it changes back to its standard color scheme. I understand why, because it's not active anymore and isn't being hovered.
所以我需要像聚焦之类的东西，但这与导航栏是否折叠有关.你们有什么想法要实现吗?
So I need somethink like focus, but that's linked with the navbar being collapsed or not. Do you guys have any idea how to achieve this?
在互联网上搜索后，我发现了以下问题: 如何在单击导航键时更改导航条的颜色
After searching around the internet I found this question: how to change navbar color when nav-toggle is clicked
这与我几乎是一个相同的问题，但是我真的不明白Alaksandar Jesus Gene的所作所为，而且我无法使它起作用.有人可以解释他做了什么(见下文)，并帮助我理解为自己的示例而应进行哪些更改才能使其正常工作?
It's almost the same question as I have, but I don't really understand what Alaksandar Jesus Gene did and I can't make it work. Can someone explain what he did (see below) and help me understand what I should change to make it work in my own example?
我不太了解的解决方案代码:
Solution code that I don't quite understand:
.navbar-yellow{
background-color: yellow !important;
}
$(".navbar-toggle").click(function(){
$("nav").toggleClass("navbar-yellow");
})
非常感谢您的帮助/想法.
Any help/ideas is/are greatly appreciated.
预先感谢
推荐答案
您可以使用 .toggleClass().
我给按钮提供了一个id，并使用jQuery选择了它.单击该按钮后，将类is-active添加到按钮中.然后在您的CSS中，根据需要设置此类的样式.
I've given the button an id and selected it with jQuery. Add the class is-active to the button when it has been clicked. And in your CSS, style this class as you need.
$(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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar" id="hamburger">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#myPage">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">ABOUT</a></li>
<li><a href="#services">SERVICES</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#pricing">PRICING</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
这篇关于悬停时和导航栏切换折叠时更改颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
