Цвет фона скрывает другую коробку-тень - PullRequest
Новая
       34

Цвет фона скрывает другую коробку-тень

0 голосов
/ 05 октября 2018

У меня есть таблица, и я хочу установить стиль при наведении курсора на строку, поэтому я использовал box-shadow и добавил соответствующий z-index для этой работы.Проблема заключается в том, что когда я устанавливаю td s для фона, он просто помещается поверх тени-тени, и поэтому наведение не работает.

Как можноЯ исправил это так, чтобы у меня был как фоновый цвет в элементах td, так и стиль тени блока при наведении на строку?

Я воспроизвел его в этом простом jsfiddle:https://jsfiddle.net/pjz43a52/

Убедитесь, что при наведении указателя мыши на строку находится тень от других рядов.Если вы прокомментируете строку для td background-color, она просто работает: 

table td {
  /* background-color: #EFEFEF; */
  z-index: 1;
}

Есть идеи, почему это произошло?

1 Ответ

0 голосов
/ 05 октября 2018

Это происходит потому, что td является потомком tr.Когда ваш CSS устанавливает tr на более высокий z-индекс, чем td при наведении, он будет визуализироваться над окружающими ячейками, чтобы вы могли видеть тень, отбрасываемую на его соседей.Однако тень не может быть отброшена на его собственного потомка td, поскольку они также поднимаются вместе со своим родителем.

Вам необходимо установить родительский ряд так, чтобы он отображался над его собственными потомками.Один из способов добиться этого - установить td z-index на -1 и удалить все z-index из tr.Это заставляет тень строки отображаться поверх всех ячеек, включая ее собственные дочерние элементы, но в Chrome и Firefox рендеринг ужасен.

Чтобы заставить это работать, вы также должны убедиться, что каждый элемент , затронутый изменением z-индекса, имеет свойство position, установленное в нестатическое состояние. 

table tr {
  position: relative;
}

table td {
  position:relative;
  background-color: #EFEFEF;
  z-index: -1;
}

table tr:hover {
  position: relative;
  box-shadow: 
    inset 5px 0 0 #dadce0, 
    inset -3px 0 0 #dadce0, 
    0 5px 2px 0 rgba(60,64,67,.3), 
    0 5px 3px 1px rgba(60,64,67,.15);
}
...