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。相反，在跨度等的东西上使用它。检查笔here以解决您的问题。在您的情况下，您也可以使用<div>标记，而不是在那里关闭的范围，基本上是下一级别的兄弟。

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

使用：hover CSS选择器（Angular）出现意外行为

2 个答案: