使用CSS悬停在父元素上时更改子元素状态

Question

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

我想获得仅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的选项是什么？