本文仅用户个人学习记录使用，意在提高自己的交互设计，仅此而已，欢迎指正.

hover 遮盖层设计 一般页面的设计以简洁大方为宜，降低铺天盖地的信息或者诸多的广告而让用户感觉烦人，因此在某些信息展示的时候通常只是利用简单的关键词或描述来吸引用户的眼球，当用户需要了解某些关键词时会自主性的将鼠标移动到对应的信息上，这个时候再给用户使用 hover 遮盖层来渲染或者描述更多有价值的信息来打动用户！

参考设计 - 解决方案卡片组

小屏幕 和 大屏幕

优点

• "各行各业都有解决方案" 均适用 h1 来分行渲染，这是在强调作用，让这一部分有主题描述
• 卡片组在大小屏幕做了适配，在大屏幕下是全部展示出卡片的，没有设计为最大宽度同其他一样，超出滚动是为了让用户可以一目了然所有的解决方案，如果后续解决方案增多，也可以通过右上角的 左右截图来让用户自行选择！
• 卡片默认第一个就有 hover 遮盖层效果，这是暗示用户卡片 hover 的时候是有详细信息展示的，且一个卡片组只能有一个 hover 遮盖层（除了默认值外，只有当前 hover 过的 卡片才会展示详细信息遮盖层
• 每一个 action 在 hover 的时候都应该有效果，意在告诉用户这是一个可交互的行为，比如当鼠标 hover 到 “查看行业实践” 的时候相应的 border 会加粗