：hover CSS选择器的异常行为（角度）

Question

我有一个菜单，其中包含3个层次的深度信息。 它从类别开始，然后是子类别，最后是最终链接。 其中一些链接已经在第二级甚至第一级中了，但这不是问题。 菜单工作正常。

问题是我试图使它看起来精美，因此我向每个div添加了一个指定菜单级别的类。 您可以在此处看到完整的Angular模板。 注意这些类是“ 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>

因此，这些类非常简单。 我不太擅长CSS（我更喜欢设计逻辑而不是设计），也许我在这里做一些愚蠢的事情：

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

}

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

因此，该行为对于第一级来说效果很好，但是正如您所看到的，第二级的所有行都将突出显示，而不仅仅是我徘徊的行：

第三级也是如此。

您对我做错了什么有想法吗？ 我添加了Angular标签，以防它与我的模板代码有关。 谢谢！

Answer 1

问题是您已将样式应用于div，并且当div嵌套时，样式将层叠并使其内部的所有颜色变为颜色-您可以尝试将样式直接应用于范围以避免这种情况。 我也删除了你的悬停冒号之前的空间

 .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

:hover基本上向下传播到其他级别。 不要直接在父级上使用CSS 。 而是在跨度之类的东西上使用它。在这里检查笔可以解决您的问题。 在您的情况下，您也可以使用<div>标记，而不是在此处关闭的span，它基本上是下一级别的兄弟。

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