四列，懸停時全屏覆蓋？

Question

我正在嘗試創建一種情況，其中我有 4 列拆分整個視圖。 我想實現當列懸停時發生的懸停效果。

我希望每一列的背景都稍微放大，但僅在其分配的 25%（寬度）和 100%（高度）區域內，但與該列相關的一個詞在整個屏幕上垂直居中顯示，寬度為90% 和半透明的疊加顏色。 這必須不受背景限制的 25%、100% 規則的影響。

我試了又試，終其一生都無法弄清楚。

Answer 1

我不會為您編寫代碼，但我建議您使用 JavaScript 來執行此操作。

您可以擁有絕對定位的隱藏元素（對於居中的文本，具有您描述的屬性），一旦您將鼠標懸停在相關列上，這些元素就會變得可見。 這就是為什么您需要使用 JavaScript，在每一列上都有一個事件偵聽器，並在懸停時顯示相關的居中文本。