CSS to hover on specific classes

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;
    }

I think this can hel you https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-one-element-is-hovered — FedG, Feb 02 '20 at 09:56

score 1 · Accepted Answer · answered Feb 02 '20 at 11:06

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 )

answered Feb 02 '20 at 11:06

Rob Monhemius

4,822
2
17
49

Thanks for this answer. This did not work because I'm trying to change the color of the 3 spans w/classes of .top, middle, .bottom, which is the fill color of 3 stacked lines. Changing the button did not achieve this. But, you suggested using navbar-header (great), and when I applied that with span -it worked (!) w/o changing the other spans as well. I do not know why this did not work when I used button_container with the same code (?). – TMR Feb 02 '20 at 20:09
@TMR `.topNav:hover>.navbar-header>button>.top, .topNav:hover>.navbar-header>button>.middle, .topNav:hover>.navbar-header>button>.bottom{}`. It's the same principle. – Rob Monhemius Feb 02 '20 at 20:18
Fantastic! That is the syntax I was looking for. Thanks so much. – TMR Feb 02 '20 at 20:29

score 0 · Answer 2 · answered Feb 02 '20 at 00:06

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.

TMR · Answer 3 · 2020-02-02T20:28:31.800

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; 
    }

CSS to hover on specific classes

3 Answers3