在網(wǎng)站建設(shè)中漸變是一個(gè)強(qiáng)大的CSS特性，我們將它們用于紋理、深度，甚至用CSS遮罩隱藏部分元素。今天尼高小編向介紹了使用漸變的另一種有趣方式——作為懸停效果，影響懸停元素周圍其他元素的外觀，也就是我們將看到一個(gè)懸停效果，其中懸停一個(gè)項(xiàng)目會(huì)使用CSS漸變觸發(fā)其他項(xiàng)目的視覺變化。

你知道怎么做嗎box-shadow有時(shí)用作懸停效果。它增加了某些東西的深度，如按鈕，并且可以產(chǎn)生它被壓入頁(yè)面的印象。漸變也能夠增加深度。它們經(jīng)常被用來讓一些東西看起來好像是從頁(yè)面上彈出來的。


大家可以試試漸變是否能產(chǎn)生有趣的懸停效果。不完全像一個(gè)有方框陰影的按鈕，但也許可以通過改變一個(gè)元素的狀態(tài)以及它周圍的其他元素來實(shí)現(xiàn)。懸停狀態(tài)位于其中一個(gè)項(xiàng)目上，但所有項(xiàng)目都會(huì)受到該更改的影響。懸停的元素具有最暗、最粗的背景，而漸變覆蓋了項(xiàng)目的其余部分，并用相同顏色的較淺陰影削弱了它們。

現(xiàn)在我將立即指出懸停狀態(tài)應(yīng)該不僅僅依靠改變顏色來表示變化。這個(gè)演示純粹是為了展示效果，但是如果我在制作中使用它，我會(huì)考慮額外的視覺提示。但是讓我們把它拆開來看看它是如何工作的。我認(rèn)為這很有趣，因?yàn)槲覀儗⑦M(jìn)入:nth-of-type()食譜和兄弟姐妹選擇器來完成這個(gè)。

這是HTML:<section>
  <div></div>
  <div></div>
  <div</div>
  <div></div>
  <div></div>
  <div><!-- backdrop --></div>
</section>
我們?cè)赼中有六個(gè)div<section>集裝箱。前五個(gè)div是交互元素，最后一個(gè)將包含覆蓋它們的漸變。我將從設(shè)置容器開始:section {
  position: relative;
  width: min(90vw, 400px);
}

嘗試不同的顏色和不同的層次，除了美觀之外，記住使用設(shè)計(jì)、布局和顏色，讓用戶清楚地知道他們正在與元素交互，以及交互的目的。