我有一个带有指示器的项目列表,可以使用简单的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。
https://stackoverflow.com/questions/56569061
复制相似问题