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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (12)

我有一个项目列表,其中有一个指针,可以使用简单的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。

提问于
用户回答回答于

我不认为这是可能的。从您的问题来看,听起来您希望它在点击期间发生。click事件是由javascript捕获的东西,或任何其他实现javascript的方式,我不知道任何其他方式来捕获事件。

扫码关注云+社区

领取腾讯云代金券