Как реализовать линии между блоками?

Question

[Дима Паутов]

Добрый день. Мучаюсь с одним блоком в проекте и никак не могу его до конца реализовать, как уже не пробовал.

Есть такой вот блок

При наведении на 1 элемент

Вот моя демка

В чём суть, я никак не могу придумать, как реализовать линии по умолчанию между элементами. Когда навожу, вроде норм, а вот в дефолтном состоянии не могу придумать. Пробовал через calc решить задачу с размерами, но что-то не вышло, может не правильно высчитывал. Весь список резиновый.

Помогите найти решение или хотя бы идею, как можно решить задачу, у меня все идеи пока иссякли.

Comments

[Антон Спирин]

flex + transition
вам только размеры по-молчанию указать для обычного состояния, растянутого и сжатого. Все.

[Дима Паутов]

Антон Спирин, вы в демку то смотрели? Там всё уже реализовано. Я не могу ширину по умолчанию задать. Она не может быть фиксированной, она должна быть резиновой и растягиваться при наведении

[Антон Спирин]

Дима Турков, смотрел. Вам только это и осталось сделать. В чем проблема-то? Почитайте спецификацию по flex. уделите особое внимание свойствам flex-grow, flex-shrink, flex-basis. Которые вы почему-то не используете.

Answer 1

[Максим]

Как вариант можно реализовать с использованием js'а вот так https://jsfiddle.net/m3feqsev/3/
конечно я очень быстро и не задумываясь написал, но вы идею поймете думаю

Comments

[Дима Паутов]

и такое сойдёт, если не придумаю реализацию на голом css. Спс огромное за уделённое время

[Дима Паутов]

Проанализировал ваше решение и оно же реализуется точно так же, но без js
https://jsfiddle.net/m3feqsev/4/ - или я что-то упустил?

[Максим]

Дима Турков, изначально я также пытался, но чет не работало)

[Дима Паутов]

Максим, Вообщем и целом, большое человеческое спасибо. Задача решена благодаря тебе.

[Максим]

Дима Турков, да не за что))) Было свободное время, увидел интересный вопрос, решил и сам разобраться в нем))

Answer 2

[Данил Разумков]

Используете flex.

display:flex;
align-item: center

и самой линии дайте длину по умолчанию

Comments

[Дима Паутов]

Использовать для чего? И зачем ей давать ширину по умолчанию, если мой список резиновый?

[Данил Разумков]

Дима Турков, для контейнера в котором у тебя эти блоки с полосками. Ну а как ты без начальой ширины собрался сделать полоски видимыми. Сделай в процентах.