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