在
网站建设中渐变是一个强大的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);
}
尝试不同的颜色和不同的层次，除了美观之外，记住使用设计、布局和颜色，让用户清楚地知道他们正在与元素交互，以及交互的目的。
