javascript - 如何使用伪元素::before 在 li 上制作 onclick 事件

Question

我使用和创建了一个时间线

元素。结果如下所示：

我需要单击第二个圆圈并自动将第一个和第二个圆圈之间的线开始加载另一种颜色，就像从第一个按钮到第二个按钮的进度条一样，使它看起来像一个真正的时间线。

问题是我不知道如何检测任何这些圆圈中的点击，因为它们是使用伪元素 :: 之前创建的。

这是我的代码：

ul {
  align-content: center;
  align-items: center;
  /* counter-reset: stepCount;*/
  display: flex;
  justify-content: space-around;
  margin-top: 40px;
  /* for codepen */
}

li {
  background: /*dodgerblue; */
  #DBAC78;
  color: white;
  content: ' ';
  display: flex;
  flex-grow: 1;
  height: .3em;
  line-height: 1em;
  margin: 0;
  position: relative;
  text-align: right;
  z-index: -1;
  cursor: pointer;
}

li::before {
  color: white;
  background: /*dodgerblue; */
  #DBAC78;
  border-radius: 50%;
  /*counter-increment: stepCount;*/
  content: '';
  /*counter(stepCount); */
  height: 2em;
  left: -2em;
  line-height: 2em;
  position: absolute;
  text-align: center;
  top: -.85em;
  width: 2em;
}

li.video::before {
  color: #3A1101;
  background: /*dodgerblue; */
  #DBAC78;
  border-radius: 50%;
  /*counter-increment: stepCount;*/
  content: '\f04b';
  /*url('img/play2.png');*/
  /*counter(stepCount); */
  height: 2em;
  left: -2em;
  line-height: 2em;
  position: absolute;
  text-align: center;
  top: -.85em;
  width: 2em;
  font-family: FontAwesome !important;
  vertical-align: top;
  font-weight: 700;
}

li.question::before {
  color: #3A1101;
  background: /*dodgerblue; */
  #DBAC78;
  border-radius: 50%;
  /*counter-increment: stepCount;*/
  content: '?';
  /*counter(stepCount); */
  height: 2em;
  left: -2em;
  line-height: 2em;
  position: absolute;
  text-align: center;
  top: -.85em;
  width: 2em;
  font-weight: 700;
  font-size: 1.7em;
}

li.active {
  background-color: /*lightblue;*/
  #DBAC78;
}

li.active~li {
  background-color: /*lightblue;*/
  #DBAC78;
}

li.active~li::before {
  background-color: /*lightblue;*/
  #DBAC78;
}

li.video {
  background-color: /*lightblue;*/
  #DBAC78;
}

li.video~li {
  background-color: /*lightblue;*/
  #DBAC78;
}

li.video~li::before {
  background-color: /*lightblue;*/
  #DBAC78;
}

li.question {
  background-color: /*lightblue;*/
  #DBAC78;
}

li.question~li {
  background-color: /*lightblue;*/
  #DBAC78;
}

li.question~li::before {
  background-color: /*lightblue;*/
  #DBAC78;
}

li:last-child {
  flex-basis: 0;
  flex-grow: 0;
  flex-shrink: 1;
  /* Shorthand: flex: 0 1 0; */
}

ul.bigger {
  font-size: 1.2em;
}

ul.highlight-active li.active::before {
  font-size: 1.6em;
  background: /*maroon;*/
  #DBAC78;
}

ul.highlight-active li.video::before {
  font-size: 2em;
  background: /*maroon;*/
  #DBAC78;
}

ul.highlight-active li.question::before {
  font-size: 1.3em;
  background: /*maroon;*/
  #DBAC78;
}

ul.roman li::before {
  content: counter(stepCount, upper-roman);
}

ul.triangle li::before {
  width: 0;
  height: 0;
  border-radius: 0;
  border-left: 1em solid white;
  border-right: 1em solid white;
  border-bottom: .8em solid/*dodgerblue;*/
  #DBAC78;
  content: '';
  top: -.65em;
}

ul.triangle li:first-child::before {
  left: 0;
}

ul.triangle li.active~li::before {
  border-bottom-color: /*lightblue;*/
  #DBAC78;
}

ul.triangle li.video~li::before {
  border-bottom-color: /*lightblue;*/
  #DBAC78;
}

ul.triangle li.question~li::before {
  border-bottom-color: /*lightblue;*/
  #DBAC78;
}

#containerTimeLine {
  width: 80%;
  margin-left: 120px;
  ;
  margin-right: 0;
  padding-right: 40px;
  padding-top: 30px !important;
}

<div class="container" id="containerTimeLine">

  <ul class="bigger highlight-active">
    <li onclick="PlayAudios();"></li>
    <!-- class="active" -->
    <li class="video"></li>
    <li class="question"></li>
    <li class="question"></li>
    <li class="question"></li>
    <li class="question"></li>
    <li></li>
  </ul>

</div>

如何检测圆圈中的点击并使用 javascript / jquery 执行一个事件，该事件允许更改圆圈之间线条的颜色，并带有进度条之类的过渡？

标签： javascriptjqueryhtmlcss