Всем привет! вопрос еси у меня табица сверстана флексами и сверстана по

Question

Всем привет! вопрос еси у меня табица сверстана флексами и сверстана по

вертикальным блокам. Мне нужно сделать эффект ховер который примерно работает как в table - tr
Я добавил на каждый элеметнт table-cell вннутри него дополнительный div.red-flag и рястянул на всю ширину и на ховер меняю опасити этого жлемента (он сам красный)
все работает ок но я когда ховерю на span то мой эффект на red-flag не работает . Также на мобильном экране 1й столбец table-column имеет position sticky и z-index 3 это сделано чтобы когда скролил по горизонтале то следующие жлементы в таблица были позади него и получается из-зза того что z-index у первой таблиы больше всех .red-flag не виден . Что лучше сделать в данном случае ?
<div class="table-column">
<div class="table-cell"><span>..</span><div class="red-flag">...</div>
<div class="table-cell"><span>..</span><div class="red-flag">...</div>
....

.table-cell:hover .red-flag,
.table-cell span:hover + .table-cell .red-flag { //данная строчка судя по всему не работает когда навожу на span
opacity: 1;
}
</div>
<div class="table-column">
...

#css #frontend #html #programming #russian

0

01.11.2023

5 ответов

13 просмотров

LZD

сверстать таблицу таблицей и использовать colgroup

0

6 месяцев назад

Aidos Omurzakov Автор вопроса

LZD
сверстать таблицу таблицей и использовать colgroup

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

0

6 месяцев назад

Aidos Omurzakov Автор вопроса

Anatoliy Kulak
По второму вопросу ничего не подскажу без примера ...

вот полный пример https://stackoverflow.com/questions/77400989/hover-of-nesting-elements-and-position-sticky-element-issue

0

6 месяцев назад

Anatoliy Kulak

Aidos Omurzakov
вот полный пример https://stackoverflow.com/quest...

Стикер

0

6 месяцев назад

Anatoliy Kulak · Accepted Answer

По второму вопросу ничего не подскажу без примера точно. Есть уточнение по коду выше. Только в примере опущен еще один закрывающий див или у вас на проекте тоже? <div class="table-cell"><span>..</span><div class="red-flag">...</div> Что касается css второго правила, оно работать и не будет, ибо рядом со span нет .table-cell

169 похожих чатов

Всем привет! вопрос еси у меня табица сверстана флексами и сверстана по

5 ответов

Похожие вопросы