Таблица Row Box-Shadow on Hover (Webkit)

Возможно ли это?

Мой код работает в Firefox. Я также могу заставить webkit изменять другие свойства (например, цвет фона и т.д.) При наведении, но тень окна не вступает в силу:

tr:hover {
    -webkit-box-shadow: 0px 2px 4px #e06547;
    -moz-box-shadow: 0px 2px 4px #e06547;
    box-shadow: 0px 2px 4px #e06547;
    background-color: #d4d5d6;
}

Ответы

Ответ 1

Как сказано здесь: fooobar.com/questions/132806/..., а не стиль tr, вы должны стилизовать элемент td в сочетании с псевдоклассами :first-child и :last-child. Prepending tr:hover сделает трюк для вас:

tr:hover td {
    -moz-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}
tr:hover td:first-child {
    -moz-box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}
tr:hover td:last-child {
    -moz-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}

Демо 1 со вставкой: http://jsfiddle.net/Kk6Th/

Обновление:
Демо 2 без вставки (классическая тень): http://jsfiddle.net/2nw4t/1/
Демо 3 без вставки (эффект свечения): http://jsfiddle.net/2CSuM/

Ответ 2

Я столкнулся с этой проблемой, и я нашел несколько обходных решений:

  • Добавить тень на все td.
  • Установите display: block на tr.
  • Использовать правильно стиль td:first-child:before.
  • Добавить тень ко всем td и покрыть части, которые нам не нужны.

Вы можете проверить их на этом jsFiddle: https://jsfiddle.net/maskl/cxscmvpr/3/

Ответ 3

Это случилось со мной, и я наложил на него небольшой радиус границы, и он работает.

border-radius: 1px;

В зависимости от внешнего вида, который вы пытаетесь достичь, это может быть взлом, который вы можете использовать.

Ответ 4

AvL-решение очень хорошее, спасибо за подсказку. Хотя, если мне нравится, что вы хотите box-shadow (inset) во всем tr, а не только в стороне, этот код вам поможет:

tr:hover td {
    -webkit-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset, 0 -4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}
tr:hover td:first-child {
    -webkit-box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset, 4px -4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}
tr:hover td:last-child {
    -webkit-box-shadow: -4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset, -4px -4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}

Ответ 5

Используйте свойство transform scale (1,1) с тэгом box-shadow, оно решит проблему.

tr:hover {
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}

Fiddle: https://jsfiddle.net/ampicx/5p91xr48/

Спасибо!!

Ответ 6

Добавьте это

tr {
    display: block;
}

По какой-то причине Webkit должен явно знать, что этот элемент является блочным элементом для отображения тени в ящике.