Удерживать конечную ширину анимации, если щелкнуть мышью после наведения анимации с помощью 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;
  }
}

При нажатии на раздел я хочу, чтобы этот индикатор оставался развернутым. Любые зависания в других разделах будут по-прежнему вызывать анимацию, но я хочу иметь возможность отображать «активное» состояние индикатора. Если щелкнуть другой раздел, он покажет «активное» состояние индикатора, а старый перейдет в нерасширенное состояние.

Возможно ли это с чистыми переходами CSS? Я знаю, как добиться этой функциональности с помощью d3.js, и я хочу держаться подальше от jQuery.

Answer 1

Я не думаю, что это возможно. от вашего вопроса звучит так, как будто вы хотите, чтобы это произошло во время клика. Событие click - это что-то, что фиксируется JavaScript или любым другим способом, который реализует JavaScript, я не знаю другого способа перехвата событий.