如何使 HTML5 元素有选择地隐藏兄弟元素？答案

【问题标题】：How to make HTML5 element selectively hide sibling elements?如何使 HTML5 元素有选择地隐藏兄弟元素？
【发布时间】：2025-11-24 16:30:01
【问题描述】：

我正在创建一个 HTML5 视频播放器，需要在拖拽栏上创建章节标记。标记是具有透明中心的空心椭圆。我希望标记在显示视频时隐藏进度（擦洗）和缓冲条。

我正在努力实现的目标。

我找到的最接近的解决方案是this one，但我不能使用 jquery。另外，由于我需要跨浏览器兼容性，我不能使用混合混合模式。我已经尝试更改 z-index 和 display 属性，但没有得到所需的结果。

对于精简的工作示例，请运行代码 sn-p。谢谢你们，好人。

var progress = document.getElementById('progress');
var bufferBar = document.getElementById('buffer');
var divID = document.getElementById('c-markers');

for (var i = 0; i < 3; i++) {
  var anchor = document.createElement('a');
  anchor.id = "marker" + i;
  divID.appendChild(anchor);

  var marker = document.getElementById("marker" + i);
  marker.style.backgroundImage = "url('http://i.imgur.com/YTWgnzn.png')";
  marker.style.left = (i * 150) + 'px';

  progress.value = .33;
  bufferBar.value = .66;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

section {
  position: relative;
  min-width: 640px;
  width: 100%;
  margin: 0 auto;
  line-height: 0;
}

#player {
  background-color: #252525;
  height: 40px;
  width: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
    -webkit-box-align: center;
          align-items: center;
}

.controls {
  width: 98%;
  height: 80%;
}

.controls .progress-container {
  position: relative;
  width: 100%;
  margin: 0 .5rem;
}

.controls progress {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: none;
  width: 100%;
}

.controls progress::-webkit-progress-bar {
  background: transparent;
}

.controls progress::-webkit-progress-value {
  background: transparent;
}

progress.progress-bar,
progress.buffer-bar {
  position: absolute;
  width: 100%;
  height: 2px;
  margin-top: 15px;
  cursor: pointer;
}

progress.progress-bar {
  z-index: 1000;
}

progress.buffer-bar {
  z-index: 100;
}

progress.buffer-bar::-webkit-progress-value {
  background: rgba(255, 255, 255, 0.2);
}

progress.buffer-bar::-moz-progress-bar {
  background: rgba(255, 255, 255, 0.2);
}

progress.progress-bar::-webkit-progress-value {
  background: red;
}

progress.progress-bar::-moz-progress-bar {
  background: red;
}

progress {
  background-color: rgba(100, 100, 100, 0.2);
}

progress.progress-bar {
  color: red;
}

progress[value]::-webkit-progress-bar {
  background: rgba(100, 100, 100, 0.2);
}

#c-markers {
  width: 100%;
}

#c-markers a {
  position: absolute;
  width: 10px;
  height: 10px;
  cursor: pointer;
  overflow: visible;
  margin-top: 11px;
  z-index: 10000;
}

<body>
  <section id="section-container">
    <div id="player">
      <div class="controls">
        <div class="progress-container">
          <div id="c-markers"></div>
          <progress id="progress" class="progress-bar" value="0" min="0"></progress>
          <progress id="buffer" class="buffer-bar" value="0" min="0"></progress>
        </div>
      </div>
    </div>
  </section>
</body>

【问题讨论】：

可以安全地假设通过磁盘可以看到蓝色背景/视频吗？是否有机会调整设计？
为什么不将您链接到的问题中的解决方案重写为普通的旧普通 JavaScript？
@MarkHandy：是的，通过磁盘可以看到蓝色背景。客户已经提供了规格，我不能随意调整。
@Shaggy 问题链接中的解决方案使用了背景的副本，在我的情况下，这将是一个视频。不可行。

标签： html css

【解决方案1】：

我已经完全重新设计了你的 sn-p，我认为这就是你想要的。

您的 javascript 代码（不包括在内）应计算填充物的宽度值

.markers {
  width: 600px;
  height: 50px;
  border: solid 1px blue;
  margin: 5px;
  display: flex;
  background-image: radial-gradient(circle, lightgreen, lightblue);
}

.filler {
  height: 5px;
  margin-top: 23px;
  background-image: linear-gradient(to right, red 600px, white 600px);
  background-attachment: fixed;
  background-size: 1200px 20px;
  background-position: -600px 0px;
  animation: progress 5s infinite linear;
}

@keyframes progress {
  from {background-position: -600px 0px;}
    to {background-position:    0px 0px;}
}

#filler1 {
  width: 100px;
}

#filler2 {
  width: 80px;
}

#filler3 {
  width: 260px;
}

.item {
  width: 40px;
  height: 40px;
  margin-top: 4px;
  border: solid 2px blue;
  border-radius: 50%;
}

<div class="markers">
  <div class="item"></div>
  <div class="filler" id="filler1"></div>
  <div class="item"></div>
  <div class="filler" id="filler2"></div>
  <div class="item"></div>
  <div class="filler" id="filler3"></div>
  <div class="item"></div>
</div>

【讨论】：

不错的解决方案，vals。但是，我不确定如何将进度条和缓冲条分成单独的长度，因为这些条代表视频的总持续时间。