CSS to hover on specific classes - html

Question

I would like the button to change color on hover when hovering anywhere in the nav bar (.topNav). In my current code, the change happens only when hover over the button (.top, .middle, .bottom classes). I got this to work using span, but that was changing all the spans in the .topNav class.
html...
<nav class="navbar-default"
<div class="topNav">
<div class="navbar-header">
<button type="button" class="navbar-toggle button_container collapsed"
[ngClass]="{'active': !menuCollapsed}" (click)="toggleMenu()">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</button>
</div>
....other content
</div>
</nav>
SCSS...
.top, .middle, .bottom {
background: white;
transition: 0.25s;
}
.topNav:hover, .button_container:hover, .top:hover, .middle:hover,
.bottom:hover {
background: black;
transition: 0.25s;
}

Answer 1

Here you go:
.topNav{
background: red;
}
.topNav:hover>.navbar-header>button {
background: black;
transition: 0.25s;
}
<nav class="navbar-default"><!-- OOPS YOU FORGOT TO CLOSE THIS TAG -->
<div class="topNav">
<div class="navbar-header">
<button type="button" class="navbar-toggle button_container collapsed"
[ngClass]="{'active': !menuCollapsed}" (click)="toggleMenu()">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</button>
</div>
....other content
</div>
</nav>
You forgot to close the nav tag.
.topNav:hover>.navbar-header>button means when you hover over .topNav select a specfic child element ( the button ). Then do stuff with that ( paint it black )

Answer 2

header a:hover{
color:#BFEFFF;
font-weight:bold;
}
Try something like this in the CSS code.
I use this on my webpage: http://www.kunalkolhe.com/
I have heard from experienced developers that using CSS for extensive projects is not a good Idea though.

Answer 3

FYI... I got this to work with two solutions...
1) Using the navbar-header class and span. Previously when I tried this same solution with the .button_container class (instead of navbar-header), it did not work. I still do not understand why.
Code using span...
.navbar-header span {
background: white;
transition: 0.25s;
}
.topNav:hover>.navbar-header span {
background: black;
transition: 0.25s;
}
2) Code using the three classes...
.top, .middle, .bottom {
background: white;
transition: 0.25s;
}
.topNav:hover>.navbar-header>button>.top, .topNav:hover>.navbar-header>button>.middle, .topNav:hover>.navbar-header>button>.bottom {
background: black;
transition: 0.25s;
}