Is there a way to make the button change color on hover when hovering over anywhere in the navigation bar (.topNav) instead of just when hovering over the individual button elements (.top, .middle, .bottom classes)? I tried using span to achieve this, but it ended up changing all spans within the .topNav class.
Here is the HTML code snippet:
<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>
And here is the SCSS code block:
.top, .middle, .bottom {
background: white;
transition: 0.25s;
}
.topNav:hover, .button_container:hover, .top:hover, .middle:hover,
.bottom:hover {
background: black;
transition: 0.25s;
}