如果在带有 CSS 的悬停动画后单击，则保持结束动画宽度

Question

我有一个带有指示器的项目列表，该指示器使用简单的 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;
  }
}

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

纯 CSS 转换是否可行？我知道如何使用 d3.js 实现此功能，我想远离 jQuery。

Answer 1

我不认为这是可能的。 从你的问题来看，听起来你希望它在点击时发生。 单击事件是由 javascript 或任何其他实现 javascript 的方式捕获的事件，我不知道任何其他方式来捕获事件。