在
網站建設中漸變是一個強大的CSS特性，我們將它們用于紋理、深度，甚至用CSS遮罩隱藏部分元素。今天尼高小編向介紹了使用漸變的另一種有趣方式——作為懸停效果，影響懸停元素周圍其他元素的外觀，也就是我們將看到一個懸停效果，其中懸停一個項目會使用CSS漸變觸發其他項目的視覺變化。
你知道怎么做嗎box-shadow有時用作懸停效果。它增加了某些東西的深度，如按鈕，并且可以產生它被壓入頁面的印象。漸變也能夠增加深度。它們經常被用來讓一些東西看起來好像是從頁面上彈出來的。
大家可以試試漸變是否能產生有趣的懸停效果。不完全像一個有方框陰影的按鈕，但也許可以通過改變一個元素的狀態以及它周圍的其他元素來實現。懸停狀態位于其中一個項目上，但所有項目都會受到該更改的影響。懸停的元素具有最暗、最粗的背景，而漸變覆蓋了項目的其余部分，并用相同顏色的較淺陰影削弱了它們。
現在我將立即指出懸停狀態應該不僅僅依靠改變顏色來表示變化。這個演示純粹是為了展示效果，但是如果我在制作中使用它，我會考慮額外的視覺提示。但是讓我們把它拆開來看看它是如何工作的。我認為這很有趣，因為我們將進入:nth-of-type()食譜和兄弟姐妹選擇器來完成這個。
這是HTML:<section>
<div></div>
<div></div>
<div</div>
<div></div>
<div></div>
<div><!-- backdrop --></div>
</section>
我們在a中有六個div<section>集裝箱。前五個div是交互元素，最后一個將包含覆蓋它們的漸變。我將從設置容器開始:section {
position: relative;
width: min(90vw, 400px);
}
嘗試不同的顏色和不同的層次，除了美觀之外，記住使用設計、布局和顏色，讓用戶清楚地知道他們正在與元素交互，以及交互的目的。
