问如果在使用CSS的悬停动画之后单击，则保持结束动画宽度

EN

我有一个带有指示器的项目列表，可以使用简单的CSS动画在悬停时展开，请参见下面的jsfiddle。

https://jsfiddle.net/jsiman/p9kqoc8h/8/

@keyframes indicator-hover-on {
  0% {
    width: 10px;
  }
  100% {
    width: 20px;
  }
}

@keyframes indicator-hover-off {
  0% {
    width: 20px;
  }
  100% {
    width: 10px;
  }
}

当单击某个部分时，我希望该指示器保持展开状态。任何悬停在其他部分仍然会触发动画，但我希望能够显示“活动”指示器状态。当单击另一个部分时，它将显示“活动”指示器状态，而旧的指示器将转换回未展开的状态。

对于纯CSS转换，这是可能的吗？我知道如何使用d3.js来实现此功能，并且我希望远离jQuery。