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>

单击人字形时，我的整个文本和人字形更改为颜色＃508be4，但是单击文本（我的菜单）时，只有我的文本颜色更改，人字形保持黑色。我在这里可以做什么以拥有更好的功能？

Answer 1

考虑到您拥有SCSS，可以使用以下方法（在.appSubMenu:hover内移动用于图标/人字形的规则）：

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

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

1 个答案: