可扩展的HTML/CSS语言选择

我正在尝试用HTML和CSS构建一个可扩展的语言选择元素。以下是它最初的样子：

这是我想让它在你悬停时的样子：

我的HTML：

.wrapper{
利润率：20px；
背景颜色：浅灰色；
边界半径：20px；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：周围的空间；
宽度：33px；
}
.图标{
填充物：5px10px；
显示：无；
}
.icon.active-icon{
显示：内联块；
}
.图标：悬停{
光标：指针；
显示：内联块；
}

---

当您悬停图标时，它不会影响

.icon

类的所有元素，而只影响悬停的元素。您可以在

.wrapper

类上设置

：hover

，并在悬停的wrapper上为

图标设置
内联块


.wrapper{
利润率：20px；
背景颜色：浅灰色；
边界半径：20px；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：周围的空间；
宽度：33px；
}
.图标{
填充物：5px10px；
显示：无；
}
.icon.active-icon{
显示：内联块；
}
.wrapper:hover.icon{
光标：指针；
显示：内联块；
}

您有一个隐藏的元素，并且您想要它，以便当您将鼠标悬停在该隐藏元素上时，它会显示自己。如何工作？有3个元素具有
图标
类，其中一个元素具有
活动图标
类，其
显示
属性设置为
内联块
，使其可见。由于它也有
图标
类，我认为在悬停状态下为所有
图标
元素设置
显示：内联块
是行不通的
.icon:hover
仅影响一个特定的悬停图标。它不会神奇地影响所有的
.icon
s——事实上，这是非常不受欢迎的。相反，请尝试
.wrapper:hover>.icon