表格懸停框架陰影（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; 
}

來源

2011-05-12 Anthony C

我在'tr'找到樣式沒有最好的支持。 – alex 2011-05-12 01:56:33

由於這裏回答：https://stackoverflow.com/a/11002077/1106393，而不是造型tr你應該風格結合td - 元素與僞類:first-child和:last-child。前面加上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/

來源

2012-06-12 18:00:59 AvL

...但是，只適用於'inset'。 [相同的小提琴在陰影中沒有'inset]（http://jsfiddle.net/2nw4t/） – 2012-08-31 21:51:35

它沒有'inset'：[fiddle]工作（http://jsfiddle.net/2nw4t/1/）它是隻有box-shadow（以前的'-3px'）的第四個屬性看起來不太好。將其更改爲「0」... – AvL 2012-09-03 11:14:34

嗯，你的確看起來很正確，+1！可惜我無法使用它，因爲我的細胞是透明的（我只是想要一種「輝光般的」效果）。我的解決方案：在表格頂部覆蓋一個列表（在這種情況下，「

-2

添加此

tr { 
    display: block; 
}

出於某種原因的Webkit需要明確知道該元素是一個塊元素來顯示一個盒子陰影。

來源

2011-06-30 19:04:36 ramono

這工作，但..表格行（自然）開始像一個普通的塊元素。所以自動間距和colspan等會丟失。如果我們可以擁有我們的蛋糕並且也可以吃它，會不錯。 – 2011-11-21 12:54:59

瀏覽器不喜歡，但... – DM8 2012-05-24 17:57:29

這發生在我身上，我在它上面放了一些小的邊界半徑，它可以工作。

border-radius: 1px;

根據你試圖實現的外觀，它可能是一個黑客，你可以使用。

來源

2012-05-28 20:08:15 Kenny

經過測試，無法正常工作。此外，即使您想要一個（至少在Webkit上，這是手頭的問題），border-radius對錶格行也沒有任何影響。 – 2012-08-31 21:54:03

AvL的解決方案非常好，謝謝你的提示。如果你像我一樣想在整個TR的box-shadow (inset)雖然，不只是一個側面，這個代碼應該幫助你：

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; 
}

來源

2014-10-03 01:42:47 Fanch

我面對這個問題，我發現了幾個解決方法：

在所有td上添加陰影。
Set display: block on tr。
使用正確樣式td:first-child:before。
給所有td添加陰影並覆蓋我們不需要的部分。

您可以檢查他們在此的jsfiddle： https://jsfiddle.net/maskl/cxscmvpr/3/

來源

2016-04-22 13:15:22 Marek

使用變換規模（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); 
}

小提琴：https://jsfiddle.net/ampicx/5p91xr48/

謝謝！

來源

2017-12-27 17:03:21

表格懸停框架陰影（Webkit）

回答

相關問題