Недавно я столкнулся с этим постом, когда имел дело с подобной проблемой.Я думаю, что нашел другой подход, использующий свойства display: flex; вместе с position: relative; для вашего элемента tr в CSS с гораздо меньшей разметкой (немного стилей td и меньше стилей psuedo):
Setup tr как flexbox
tr {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
position: relative;
align-items: center; /* Vertically aligns td's inside the tr */
}
Это устанавливает TR как flexbox, что позволяет ему воздействовать на z-index, не нарушая его положение в DOM.Все, что вам нужно, это настроить z-index псевдоэлемента tr:hover и добавить ваши background-color и box-shadow эффекты:
Настройка :hover Эффекты
tr:hover {
z-index: 1 /* or higher if necessary */
-webkit-box-shadow: 0px 2px 4px #e06547;
-moz-box-shadow: 0px 2px 4px #e06547;
box-shadow: 0px 2px 4px #e06547;
background-color: #d4d5d6;
}
Возможно, вам придется настроить размер и положение элементов td внутри flexbox tr с помощью align-items, поскольку мы больше не используем свойство tr по умолчанию display: table-row.Вы бы центрировали свои элементы td по вертикали, используя свойство thr align-items: center; (см. Выше).Затем вы устанавливаете свою ширину td
td {
width: 10em;
}
См. Рабочую скрипку здесь: https://jsfiddle.net/t68b9cwd/6/
Это решение является довольно универсальным, с современными браузерами, обрабатывающими это без префиксов, но они могут быть экземплярами со старымибраузеры, которые могут вам понадобиться для обходных путей (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox), и аналогично тому, как Google стилизует строки в Gmail.