html - 使用 CSS 将鼠标悬停在父元素上时更改子元素状态

Question

我想激活从第 3 方定义并导入项目的图标的悬停状态。

我想获得仅 CSS 的解决方案，并且覆盖现有规则将毫无意义，因为每个图标都有不同的更改/属性，这需要大量的重新输入。

HTML

<a class="activate-hover-state-on-both" href="#">
  <icon class="profile"></icon> Profile
</a>

CSS

.activate-hover-state-on-both:hover > icon {
 // ACTIVATE HOVER STATE AS STYLES ARE INHERITED FROM 3rd PARTY AND NOT OVERWRITE BEHAVIOUR
}

如果没有使用纯 CSS 的选项，我使用 VanillaJS 的选项是什么？

标签： htmlcsssassicons