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

【问题标题】：Mouse hovering is not applied on menu-icon, just only on the menu-text鼠标悬停不适用于菜单图标，仅适用于菜单文本
【发布时间】：2019-07-12 19:45:01
【问题描述】：

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>

单击 V 形时，我的整个文本和 V 形变为颜色 #508be4，但单击文本（我的菜单）时，只有我的文本颜色发生变化，V 形保持黑色。我可以在这里做些什么来获得更好的功能？

【问题讨论】：

如果我理解正确，您希望在.appSubMenu:hover 上进行样式设置，因此请不要使用.appSubMenu img.chevDownTorq:hover，而是使用.appSubMenu:hover img.chevDownTorq

标签： html css sass angular7

【解决方案1】：

考虑到您有 SCSS，您可以使用以下内容（将您的规则用于 .appSubMenu:hover 内的图标/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;
    }
}

【讨论】：