Unexpected behavior with the :hover CSS selector (Angular)

Question

I've got a menu with 3 levels of deepness. It starts with the categories, then the subcategories, and after all, the final links. Some of these links are already in the second or even the first level, but that's not a problem. The menu is working fine.

The problem is that I'm trying to make it look fancy, so I added to each div a class that designates the menu level. You can see the full Angular template here. Mind that these classes are the "lvl0", "lvl1", "lvl2":

<div class="menu-container">
  <div class="row header">
    <img class="logo" src="../../../assets/menu-header.PNG">
  </div>
  <div class="row menu-btn">
    <div class="inner-menu-btn" (click)="openMenu()">
      <span class="menu-span" [@menuStringAnim]="active">MENU</span>
      <i class="fa fa-bars menu-icon" [@menuIconAnim]="active"></i>
    </div>
  </div>
</div>
<div class="menu-list" [@menuListAnim]="active">
  <div class="row row-fix lvl0" *ngFor="let category of getCategories()" (click)="openCategory(category)">
    <div class="little-menu-bar-toplvl" *ngIf="categoriesNavigator.lvl0 == category.key"></div>
    <span class="menu-top-level">{{ category?.title?.toUpperCase() }} </span>
    <div *ngIf="categoriesNavigator.lvl0 == category.key">
      <br>
      <div class="row row-fix lvl1" *ngFor="let subcategory of getSubcategories(category.key)" (click)="openSubcategory(subcategory)">
        <div class="little-menu-bar-midlvl"></div> 
        <span class="menu-second-level">{{ subcategory?.title?.toUpperCase() }} </span>
          <div *ngIf="categoriesNavigator.lvl1 == subcategory.key">
            <br>
            <div class="row row-fix lvl2" *ngFor="let thirdLevel of getThirdLevel(category.key, subcategory.key)" (click)="openUrl(thirdLevel)">
                <div class="little-menu-bar-lowlvl" *ngIf="categoriesNavigator.lvl0 == category.key"></div>
                <span class="menu-third-level">{{ thirdLevel?.title?.toUpperCase() }} </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

So these classes are very simple. I'm not very good at CSS (I prefer designing logic rather than designing), and maybe I'm doing some stupid thing here:

.lvl0 :hover{
    color: orange;
}
.lvl1 :hover{
    color: orange;

}

.lvl2 :hover{
    color: orange;
    clear: both;
}

So the behavior works nice for first level, but as you can see, all the rows with the second level get highlighted instead of just the one I'm hovering on:

Same happens with the third level.

Do you have any idea on what I'm doing wrong? I'm adding the Angular tag just in case it has something to do with my template code. Thank you!

Answer 1

The problem is that you have applied the style to your div and as the divs are nested, the styles will cascade and turn everything inside it the colour - you can try to apply the styles directly to the spans to avoid this. Also I have removed the space before your hover colon

 .lvl0:hover>span { /* leave hover on div but style the span */ color: orange; } .lvl1:hover>span { color: red; } .lvl2:hover>span { color: green; } 

 <div class="lvl0"> <span>test 0</span> <div class="lvl1"> <span>test 1</span> <div class="lvl2"> <span>test 2</span> </div> </div> </div> 

Answer 2

The :hover is basically propagating down to other levels. Do not use CSS on the parent directly. Instead, use it on something like span etc. Check pen here to solve your issue. In your case, you can have <div> tag too instead of the span which closes there and is basically a sibling of next level.

.lvl:hover {
    //common for all
    color: orange;
}