如何通过CSS实现悬停YouTube进度条时显示隐藏的加载进度元素（无需创建虚拟元素）

我明白你遇到的困扰了——你想实现仅在悬停YouTube进度条时才显示加载进度，但当前的CSS因为DOM层级的问题没达到预期效果。咱们一步步拆解原因和解决方案：

问题根源 #

你原来的代码存在两个核心问题：

• 层级选择错误：你用的兄弟选择器.ytp-progress-bar:hover ~ .ytp-load-progress根本无法匹配到目标元素，因为.ytp-load-progress并不是.ytp-progress-bar的同级元素，它嵌套在.ytp-chapter-hover-container内部，这个选择器的层级逻辑完全不对。
• 父容器隐藏继承：你给.ytp-chapter-hover-container设置了visibility:hidden;，这会让它的所有子元素（包括.ytp-load-progress）默认继承隐藏状态，哪怕单独给子元素设visibility:visible能临时显示，但选择器逻辑错误还是无法触发悬停显示的效果。

解决方案 #

根据YouTube的DOM结构（.ytp-progress-bar和.ytp-chapter-hover-container是同级元素，都在进度容器内），我们需要调整选择器逻辑，先定位到同级的父容器，再精准选中里面的加载进度元素：

方案1：仅悬停进度条时触发

/* 默认隐藏加载进度 */
.ytp-load-progress {
  visibility: hidden;
}

/* 隐藏章节悬停容器里的其他内容（如果需要保留父容器结构） */
.ytp-chapter-hover-container .ytp-chapter-hover-content {
  visibility: hidden;
}

/* 悬停进度条时，显示对应父容器内的加载进度 */
.ytp-progress-bar:hover ~ .ytp-chapter-hover-container .ytp-load-progress {
  visibility: visible;
}

方案2：悬停整个进度区域都触发（体验更友好）

如果希望用户悬停进度条的整个区域都能显示加载进度，可以直接针对父容器做悬停触发：

.ytp-load-progress {
  visibility: hidden;
}
.ytp-chapter-hover-container .ytp-chapter-hover-content {
  visibility: hidden;
}

/* 悬停整个进度容器时显示加载进度 */
.ytp-progress-container:hover .ytp-load-progress {
  visibility: visible;
}

逻辑验证 #

这样修改后，默认状态下加载进度是隐藏的；当你悬停进度条（或整个进度区域）时，选择器会正确定位到.ytp-chapter-hover-container内的.ytp-load-progress，将它的visibility改为visible，完美实现你想要的效果。

内容的提问来源于stack exchange，提问作者Please Be A Decent Person