将第一个子级默认选择的颜色更改回未聚焦的颜色

Question

我正在尝试使用CSS创建一个简单的选择菜单。

我希望它像这样：

进入页面后，有列表项。列表项的第一个孩子的默认颜色为黄色（选定的颜色），而其兄弟姐妹的默认颜色为蓝色（未选定的颜色）。我希望它到达用户单击第二个或第三个或第四个等等的位置。第一个为黄色的孩子变回未选中的蓝色，而另一个被选中的选定列表项变成了黄色。

我将重点放在列表颜色上以更改颜色，以及第一个孩子更改为默认黄色。但是，当我更改为选择列表项时，第一个孩子保持黄色，而我选择的下一个列表项变为黄色。

这是我正在使用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;
}