Наведение вложенных элементов и проблема с закреплением позиции элемента ⇐ CSS

[Anonymous]

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

У меня возникла проблема при наведении курсора на диапазон элементов, красная линия исчезла, а вторая проблема: красная линия не видна в первом столбце, положение которого фиксировано для прокрутки.

CSS:

.table { дисплей: гибкий; ширина: 100%; переполнение-х: прокрутка; фон: аква; } .таблица-столбец { ширина: 33% } .table-cell { отступ: 15 пикселей 20 пикселей; минимальная ширина: 220 пикселей; дисплей: гибкий; оправдание-содержание: центр; положение: относительное; } охватывать { z-индекс: 1; } .Красная линия { позиция: абсолютная; ширина: 600%; высота: 100%; фон: #ff4a4a; справа: -5%; z-индекс: 0; радиус границы: 10 пикселей; непрозрачность: 0; переход: непрозрачность 0,2 с, легкость выхода; } .table-column:first-child { z-индекс: 3; фоновое изображение: URL('https://wallpaper.dog/large/20616186.jpg'); положение: липкое; слева: 0; цвет: #fff; } .table-cell:hover .red-line, .table-cell span:hover+.red-line { непрозрачность: 1; } HTML:
1 прикрепленный 2 прикрепленных 3 прикрепленных 1 2 3 1 2 3 1 2 3