Html CSS元素伪不覆盖子元素样式

所以我想设计一个包含其他html元素的锚元素。基本代码是：
HTML:

目标是当用户将鼠标悬停在锚上时，文本颜色应为红色。在这种解决方案中，红色不适用，但文字装饰效果良好。这是一个
如果我在a级别上设置了颜色，效果会更好（），或者根本没有设置颜色（），但我需要为标题和主体部分设置不同的颜色。
我还尝试为每个元素（）设置悬停伪值，但很难看的是，所有元素都可以进行装饰，但只有悬停在确切的元素上时，才会应用颜色。 我想实现第二个版本，但使用与第一个版本类似的自定义颜色。
谢谢你的帮助

---

编辑：我忘了解释h3标记中也有图标，这就是为什么span标记中有标题。

如果您试图给锚元素中包含的所有元素上色，这应该可以

#sub-menu a:hover *{
    color: red;
}

---

酷。我收到了关于通用选择器和专用性的警告。：）有趣的是，文本装饰不起作用。知道为什么吗？我对您的解决方案进行了一些调整，这里是我的最终解决方案：您的

文本装饰

css应该保持得体。这只是为了确保所有文本的颜色均为红色，但正如您所见，如果我不更改该颜色，则无法正常工作：或者我理解错误。子菜单a:hover{text decoration:none；}是必需的。

#sub-menu {
  margin-top: 10px;
}
#sub-menu a span {
  color: black;
}
#sub-menu a div {
  color: #6b6b6b;
}
#sub-menu a:hover {
  color: red !important;
  text-decoration: none;
}

#sub-menu a:hover *{
    color: red;
}