Допустим, у нас есть следующая HTML-структура
<div class="overflow box">
<div class="position-relative list-items">
<div class="position-absolute show-on-hover">
</div>
<div class="position-relative list-items">
<div class="position-absolute show-on-hover">
</div>
...
<div class="position-relative list-items">
<div class="position-absolute show-on-hover">
</div>
</div>
Идея состоит в том, что в главном блоке (контейнере) есть overflow: hidden scroll для хранения количества элементов внутри и отображения прокрутки, когда число достаточно велико. Когда hover на любой внутренней стороне div, элементы absolute, расположенные и отображаемые none, должны появляться и прилипать к соответствующим родителям, расположенным relative.
Желаемый результат выглядит так:
Однако мы видим это:
Я нашел одно решение , которое заключается в использовании javacript для вычисления положения родительского div (position: relative) на каждом наведении и, таким образом, настройки свойств top и left для hover div.
Есть ли какой-нибудь возможный способ визуально вырваться из overflow только с помощью CSS? Может быть, некоторые изменения структуры или некоторые CSS-твики.