綜上可見框陰影通過透明背景

我已經創建了一個懸停效果，其執行以下操作：綜上可見框陰影通過透明背景

在懸停：

1）元件盤旋頂部4像素，左4像素。

2）背景設置爲透明。

3）文字陰影設置爲4px 4px。

4）Box-shadow設置爲4px 4px並設置爲高亮顏色。

top: -4px; 
    left: -4px; 
    position: relative; 
    text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2); 
    background-color: transparent; 
    box-shadow: 4px 4px 0 #E56E21;

這應該給人一種錯覺，即文本只向上移動4個像素，而不是整個元素。但是，即使將背景設置爲透明，我實際上也無法通過背景看到箱形陰影。

箱形陰影應該被看作是懸停文本的新背景顏色，但是我只是在元素已經移開的邊緣處獲得輪廓。

如何讓背景真正透明？

的jsfiddle： http://jsfiddle.net/WJ83B/3/

來源

2014-03-30 DGDD

可否請您與正常添加CSS和HTML和懸停狀態+ http://jsfiddle.net/ – JohanVdR

box-shadow不會在框中呈現（至少在當前的webkit中），所以透明屬性的工作原理如下 – Misiur

請提供一個可用的JSFiddle。 –

你嘗試的解決方案過於複雜（和Javascript是矯枉過正，如簡單的任務）。只需將文本包裝在另一個標籤中並取代它，這樣您的背景就會保留在它所屬的位置。

JSFiddle

HTML：

<p class="menu_item_brand"><span>something</span></p>

CSS：

.menu_item_brand:hover span{ 
    top: -4px; 
    left: -4px; 
    position: relative; 
    text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2); 
}

來源

2014-03-30 19:57:53

感謝您的幫助！ – DGDD

綜上可見框陰影通過透明背景

回答

相關問題