鼠标悬停不适用于菜单图标，仅适用于菜单文本

Question

style.scss

.appSubMenu {   
    font-family: 'Roboto';
    font-size: $fontsize;
    font-weight: 500;
    background-color: #FFFFFF;
    cursor: pointer;
}

.appSubMenu:hover {
    font-family: 'Roboto', sans-serif;
    font-size: $fontsize;
    background-color: #FFFFFF !important;
    color:#508be4!important;
    cursor: pointer;
}


.appSubMenu img.chevDownTorq:hover {
    content:url("./assets/icons/cheveron_down_hovered.svg")!important;   
}

app.comp.html

  <a *ngIf="item.value.length!=0" href="#" class="nav-link appSubMenu"
    data-toggle="dropdown" id="{{i}}" > my menu <img class = "chevDownTorq" src="assets/icons/chevron_down_torq.png"/>
  </a>

单击chevron时，我的整个文本和chevron将更改为颜色#508be4，但单击文本( my menu)时，只有我的文本颜色更改，chevron保持黑色。我可以在这里做些什么来获得更好的功能？

Answer 1

考虑到您有.appSubMenu:hover，您可以使用以下方法(在SCSS中移动用于图标/V形的规则)：

.appSubMenu {   
    font-family: 'Roboto';
    font-size: $fontsize;
    font-weight: 500;
    background-color: #FFFFFF;
    cursor: pointer;
}

.appSubMenu:hover {
    font-family: 'Roboto', sans-serif;
    font-size: $fontsize;
    background-color: #FFFFFF !important;
    color:#508be4!important;
    cursor: pointer;

    img.chevDownTorq {
        content:url("./assets/icons/cheveron_down_hovered.svg")!important;
    }
}