框陰影 - 點擊後面的圖像+慢滾動

我有兩個棘手的問題交織在一起。我在盒子的四邊有一個插入框陰影小插圖，但我有可點擊的圖像，因爲陰影/暈影在圖像上（在z-index：-1處），所以我無法點擊。我讀了一些關於使用指針事件的信息：無，但我認爲它會影響盒子中的所有內容，當我嘗試使用它時，它不起作用。有關如何讓這些圖片可點擊但仍然隱藏在背後的建議？框陰影 - 點擊後面的圖像+慢滾動

此外，我已經通過以前的文章瞭解有關滾動速度與盒陰影。我已經儘可能小了，但是有沒有人想過如何讓它變得更快呢？我非常喜歡外觀，但如果滾動速度太慢，功能無法正常工作。

以下是到目前爲止構建的網站的鏈接。

http://www.official-design.com/TEST_PROJECT.html http://www.official-design.com/TEST_GRID.html

請很好 - 我在這個新手 - 我是一個建築師不是一個網頁設計師。任何建議將不勝感激。

來源

2012-10-07 user1725832

您是否確實遇到過滾動速度問題？我相信這完全是你的情況下腳本設置的問題。 – unclenorton

爲什麼你有z-index: -1的鏈接？刪除並鏈接工作正常，陰影仍然可見。

我還建議直接將框陰影應用於img或a元素，而不是包含它們的td。

來源

2012-11-14 02:33:23

刪除負數z-index將無法使用插入陰影。有三兩件事要做，以達到你所需要的：

刪除多餘float: left從#makeMeScrollable div.scrollableArea img規則。這是爲了確保元素正確包裝圖像。
從.SHADOW規則中刪除box-shadow屬性。

添加以下CSS爲自己的鏈接：

.SHADOW a { 
    display: block; 
    -webkit-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.25); 
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.25); 
}

請注意，我用rgba值，而不是#ccc，因爲陰影會在圖像上被覆蓋。

作爲一個方面說明，沒有必要命名所有大寫的類。它降低了可讀性。

來源

2012-11-14 03:08:28 unclenorton

框陰影 - 點擊後面的圖像+慢滾動

回答

相關問題