Изменить первый выбранный по умолчанию цвет ребенка обратно на несфокусированный цвет

Question

Я пытаюсь создать простое меню выбора с помощью CSS.

Я хочу, чтобы это было так:

при входе на страницу появляются списки. Первый дочерний элемент списка имеет цвет по умолчанию: желтый (выбранный цвет) , в то время как его дочерние элементы имеют цвет синий (невыбранные цвета) . Я хочу, чтобы, когда пользователь нажимает 2-й, 3-й или 4-й и т. Д., Первый дочерний элемент, который был желтым, возвращается к невыбранному синему, в то время как другой выбранный элемент списка, выбранный, становится желтым.

Я получил его там, где он фокусируется на цветах списка, чтобы изменить цвет, а также на первом дочернем элементе, который изменил на желтый по умолчанию. Однако, когда я выбираю элемент списка, первый ребенок остается желтым, а следующий выбранный элемент становится желтым.

Вот мой код, который я использую Sass.

  .col-md-4 {
    .trackContainer {
      color: $pColor;
      .fas {
        float: right;
      }
      .trackName {
        cursor: pointer;
        &:nth-child(odd) {
          background: #201f1d;
          border-bottom: 1px solid #fff;
          &:hover {
            background: #1d1c1a;
          }
        }
        &:nth-child(even) {
          background: #201b1d;
          border-bottom: 1px solid #fff;
          &:hover {
            background: #161314;
          }
        }
        &:first-child {
          color: $signalYellow;
        }
      }
      ol {
        li {
          @include pStyle();
          padding: 20px;
          line-height: inherit;
          outline: 0;
          &:hover {
            color: $hoverColor;
          }
          &:focus {
            color: $signalYellow;
          }
        }
      }
    }
  }

<div className="trackContainer">
    <ol>
        { this.state.trackData.map((rows, index) => (
            <div className="trackName data-tip-right"
                 data-tip={"View " + rows.trackName}
                 key={rows.trackName + "-" + rows.track_music_id}
                 onClick={e => this.showLyrics(index, rows.trackLyrics)}>
                <li tabIndex={index}>
                    {index + 1 + ". " + rows.trackName}
                    <i className="fas fa-arrow-right" />
                </li>
            </div>
        )) }
    </ol>
</div>

Answer 1

Разве вы не можете просто дать определенному элементу выбранный класс и удалить класс предыдущего выбранного?

<ol>
 <li onmouseover="selectItem(this)">
     123
 </li >
 <li onmouseover="selectItem(this)">
     1234
 </li >
</ol>

<script>
   function selectItem(item) {
    $('.selectedItem').attr('class', '');
    $(item).attr('class', 'selectedItem');
   }
</script>

.selectedItem {
  color: yellow;
}