如何修复动画丝带组件RibbonContainer的CSS hover悬停效果失效问题

问题原因 #

你的效果无法触发是两处CSS选择器使用错误导致的：

• 选择器匹配类型不统一：CSS中使用ID选择器#RibbonContainer定位容器，但HTML中的容器仅设置了class="RibbonContainer"属性，二者不匹配，容器的hover规则从未生效。
• 选择器关系误用：你用了相邻兄弟选择器+定位#RibbonText，但#RibbonText是RibbonContainer的子元素，不是它的同级兄弟元素，这条规则永远匹配不到目标元素。

解决方案 #

只需要修改hover对应的选择器即可，修正后的CSS规则如下，其余原有代码不需要调整：

.RibbonContainer:hover #RibbonText {
  width: 100%;
  visibility: visible;
  padding-right: 10px;
}

修改后只要鼠标悬停在RibbonContainer容器的任意区域，包括左侧#left图标、右侧#right图标、中间文字区域，都会触发丝带的展开动画，符合预期效果。

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