为多个元素应用hover样式失效问题排查

你的问题出在CSS选择器的语法上：

.iconName:hover > svg, h1 {
    color: blue;
}

这里的逗号会将选择器拆分为两个独立规则：.iconName:hover > svg（悬停时的子元素svg）和h1（所有h1元素），所以<h1>会一直显示蓝色，和父元素的hover状态无关。

修正方案 #

需要明确指定两个子元素都要在.iconName悬停时生效，正确的选择器写法有两种：

1. 分别指定每个子元素的hover状态：

.iconName:hover > svg, .iconName:hover > h1 {
    color: blue;
}

2. 简化写法，选中.iconName悬停时的所有直接子元素（如果只有这两个子元素的话）：

.iconName:hover > * {
    color: blue;
}

完整修正后的代码 #

CSS

html, body {
    font-family: sans-serif;
}

svg, h1 {
    color: red;
}

.iconName {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

/* 修正后的hover选择器 */
.iconName:hover > svg, .iconName:hover > h1 {
    color: blue;
}

HTML

<div class="iconName">
  <svg width="48" height="48"><path fill="currentColor" d="M5.35 37.25v-4.6H42.7v4.6Zm0-11V21.7H42.7v4.55Zm0-10.95v-4.6H42.7v4.6Z"></path></svg>
  <h1>Menu</h1>
</div>

这样修改后，当鼠标悬停在.iconName元素上时，其子元素svg和h1都会变为蓝色，未悬停时保持红色。

内容的提问来源于stack exchange，提问作者BeanBoy