CODEWITHSUNDEEP
htmlcssangular
TMR
TMR

Reputation: 87

CSS to hover on specific classes

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

Upvotes: 0

Views: 2004

Answers (3)

TMR
TMR

Reputation: 87

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

Upvotes: 0

Rob Monhemius
Rob Monhemius

Reputation: 5144

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 )

Upvotes: 1

Knl_Kolhe
Knl_Kolhe

Reputation: 199

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.

Upvotes: 0

Related Questions